内容简介:想在你的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语法吗?想让你的项目具备热更新能力吗?本文的目标就是让你能够搭建起这样的一个基本项目。
大家之前可能用过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" }}复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- iOS 开发项目规范-浅析项目创建(OC)
- 阿里系 React 项目飞冰 2.0 正式发布, 支持 Vue 项目开发
- 前端项目开发规范意见
- 前端项目开发流程思考
- Angular 7 项目开发总结
- 值得参考的项目开发流程
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。