Babel简介
为了保证代码的兼容性,可以在写代码的时候使用 es 新语法,然后使用 babel 编译成兼容性代码。那么到底该怎么做呢?
开始
安装babel-cli
1 | # 初始化项目 |
设定转码规则
1 | cnpm install --save-dev babel-preset-es2015 babel-preset-stage-2 |
常见的规则如下:
1 | # ES2015转码规则 |
新建app.js
,并输入一下内容
1 | import http from 'http'; |
在package.json
里添加如下命令:
1 | "scripts": { |
这样就可以通过运行npm run start
来启动app.js
了
使用nodemon
监听文件变化
将nodemon
和npm run start
结合起来使用,这样一旦文件发生变化,babel 就能自动编译改动的文件
1 | cnpm install --save-dev nodemon |
修改start
命令为:
1 | "scripts": { |
重新使用npm run start
启动app.js
,然后修改app.js
,在按下ctrl+s
的时候后 babel 就会自动编译app.js
编译生产环境代码
代码上生产环境的时候,我们需要将编译好的文件放在一个单独的目录下。新建目录,并将app.js
移至该目录下:
1 | mkdir src |
对package.json
做如下修改:
1 | "scripts": { |
这样当你运行npm run build
的时候,babel
就会自动将改动文件编译并放至dist
目录下,上生产的时候只需要复制dist
目录下的代码就行了
对于 git 项目,可能你不需要每次都提交dist
目录下的改动,你可以在.gitignore
文件下忽略dist
目录的改动
将babel
的配置写入到.babelrc
文件中
1 | touch .babelrc |
写入以下内容:
1 | { |
这样你就可以去掉 package.json 中的--presets es2015,stage-2
参数了
1 | "scripts": { |
文章翻译自 babel 官方提供的 demo,源码下载请点击这里