Babel简介

Babel简介

为了保证代码的兼容性,可以在写代码的时候使用 es 新语法,然后使用 babel 编译成兼容性代码。那么到底该怎么做呢?

开始

安装babel-cli

1
2
3
4
# 初始化项目
npm init
# 安装babel
cnpm install babel-cli --save-dev

设定转码规则

1
cnpm install --save-dev babel-preset-es2015 babel-preset-stage-2

常见的规则如下:

1
2
3
4
5
6
7
8
9
10
11
# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

新建app.js,并输入一下内容

1
2
3
4
5
6
7
8
import http from 'http';

http.createServer((req, res) => {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(1337, '127.0.0.1');

console.log('Server running at http://127.0.0.1:1337/');

package.json里添加如下命令:

1
2
3
"scripts": {
"start": "babel-node index.js --presets es2015,stage-2"
}

这样就可以通过运行npm run start来启动app.js

使用nodemon监听文件变化

nodemonnpm run start结合起来使用,这样一旦文件发生变化,babel 就能自动编译改动的文件

1
cnpm install --save-dev nodemon

修改start命令为:

1
2
3
"scripts": {
"start": "nodemon index.js --exec babel-node --presets es2015,stage-2"
}

重新使用npm run start启动app.js,然后修改app.js,在按下ctrl+s的时候后 babel 就会自动编译app.js

编译生产环境代码

代码上生产环境的时候,我们需要将编译好的文件放在一个单独的目录下。新建目录,并将app.js移至该目录下:

1
2
mkdir src
mv app.js src/

package.json做如下修改:

1
2
3
4
5
"scripts": {
"start": "nodemon src/index.js --exec babel-node --presets es2015,stage-2",
"build": "babel lib -d dist --presets es2015,stage-2",
"serve": "node dist/index.js"
}

这样当你运行npm run build的时候,babel就会自动将改动文件编译并放至dist目录下,上生产的时候只需要复制dist目录下的代码就行了

对于 git 项目,可能你不需要每次都提交dist目录下的改动,你可以在.gitignore文件下忽略dist目录的改动

babel的配置写入到.babelrc文件中

1
touch .babelrc

写入以下内容:

1
2
3
4
{
"presets": ["es2015", "stage-2"],
"plugins": []
}

这样你就可以去掉 package.json 中的--presets es2015,stage-2参数了

1
2
3
4
5
"scripts": {
"start": "nodemon src/index.js --exec babel-node",
"build": "babel lib -d dist",
"serve": "node dist/index.js"
}

文章翻译自 babel 官方提供的 demo,源码下载请点击这里

作者

Cyrusky

发布于

2019-06-14

更新于

2024-11-18

许可协议

评论