[译]使用Babel7+nodemon打造你的Node.js项目开发

栏目: Node.js · 发布时间: 5年前

内容简介:想在你的Node.js项目中使用最新的js语法吗?想让你的项目具备热更新能力吗?本文的目标就是让你能够搭建起这样的一个基本项目。大家之前可能用过babel的其他低版本,但是今天我们使用的babel7和其他低版本有一些不同之处。1.Babel7的相关包都挂在了@babel域下。比如之前的
原文地址:Using babel7 with node(https://hackernoon.com/using-babel-7-with-node-7e401bc28b04)
原文作者:Will Willems
译者:Bangood复制代码

想在你的Node.js项目中使用最新的js语法吗?想让你的项目具备热更新能力吗?本文的目标就是让你能够搭建起这样的一个基本项目。 [译]使用Babel7+nodemon打造你的Node.js项目开发

大家之前可能用过babel的其他低版本,但是今天我们使用的babel7和其他低版本有一些不同之处。

1.Babel7的相关包都挂在了@babel域下。比如之前的 babel-cli 包现在更名为 @babel/cli

2. @babel/preset-env 囊括了以前所有以年份命名的presets的功能。

3. babel-node 从CLI中提取出来成了一个独立的包: @babel/node

想了解更多的关于babel7的变化的,可以到官网查看。

设置node项目结构

我们先打开我们的命令行终端工具:windows下, win+R ,输入 cmd ,回车,进入命令行工具。

创建我们的项目文件夹: mkdir my-project

切换到项目文件夹: cd my-project

我们用Git管理我们的项目,所以,我们执行一下: git init 命令。

执行npm init初始化我们的项目,会自动生成一个package.json文件。

我们再在当前目录下创建两个文件夹:dist和src。这是我们的项目结构如下:

my-project
    |--dist
    |--src
    |--package.json
复制代码

让我们现在src目录下创建一个我们整个项目的入口文件server.js

my-project
    |--dist
    |--src
    |  |--server.js
    |--package.json复制代码

要在我们的项目中使用babel7,我们执行 npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node. 

  为了告诉babel如何使用 @babel/preset-env 包,我们需要在我们项目的根目录下创建文件: .babelrc

// .babelrc
{  
"presets": ["@babel/preset-env"]
}复制代码

在编写调试Node.js项目,修改代码后,需要频繁的手动close掉,然后再重新启动,非常繁琐。现在,我们可以通过 npm install --save-dev nodemon, 在我们的项目中引入 nodemon 这个工具,它的作用是监听代码文件的变动,当代码改变之后,自动重启。

到目前为止,我们的项目结构如下:

my-project    
    |--dist
    |--node_modules
    |--src
    |  |--server.js
    |--package.json
    |--.babelrc
复制代码

添加scripts到package.json

在最后,我们添加一些 npm 命令到我们的 package.json 文件。

  • 添加 start 命令 : nodemon --exec babel-node src/server.js 。这个命令是告诉 nodemon 去监听文件的变化,一旦检测到有文件发生了变化,就会重启并用babel-node去运行 src/server.js 文件。这个命令一般用于本地开发。
  • 添加 build 命令: babel src --out-dir dist 。这个命令是告诉babel去编译 src 里的源文件,并将得到的结果输出到 dist
  • 添加 serve 命令: node dist/server.js 。这个命令是让我们用node运行我们编译好的文件。可能有人会问,为什么我们不直接用nodemon去运行我们的程序呢?这是因为相较于node,使用nodemon运行我们的程序会使用更多的内存,花费更多的启动时间。
当我们添加了以上三个命令后, package.json

里的内容就和下面的类似了:

{  
    "name": "my-project",
    "version": "1.0.0",
    "description": "",  
    "main": "src/server.js",
    "scripts": {    
        "start": "nodemon --exec babel-node src/server.js",    
        "build": "babel src --out-dir dist",    
        "serve": "node dist/server.js"  
     },  
    "author": "",  
    "license": "MIT",  
    "dependencies": {  },  
    "devDependencies": {    
        "@babel/cli": "7.4.3",    
        "@babel/core": "7.4.3",    
        "@babel/node": "7.2.2",    
        "@babel/preset-env": "7.4.3",    
        "nodemon": "1.18.11"  
      }}复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

计算机程序设计艺术(第2卷)

计算机程序设计艺术(第2卷)

Donald E. Knuth / 苏运霖 / 国防工业出版社 / 2002-8 / 98.00元

本书是国内外业界广泛关注的7卷本《计算机程序设计艺术》第2卷的最新版。本卷对半数值算法领域做了全面介绍,分“随机数”和“算术”两章。本卷总结了主要算法范例及这些算法的基本理论,广泛剖析了计算机程序设计与数值分析间的相互联系,其中特别值得注意的是作者对随机数生成程序的重新处理和对形式幂级数计算的讨论。 本书附有大量习题和答案,标明了难易程度及数学概念的使用。 本书内容精辟,语言流畅,引人入胜,可供从......一起来看看 《计算机程序设计艺术(第2卷)》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具