1. 新建项目目录,在根目录下建立两个文件夹(src和dist)和主文件(index.html):
- src:编写的 ES6 语法的 JS 文件存放的目录,如 es6.js;
- dist:用 babel 将 ES6 语法编译为 ES5 语法后存放的目录,如 es5.js;
- index.js:文件中 <script> 标签引入的 JS 文件为 dist 文件夹中编译好的 ES5 语法的 JS 文件,如:
<script src="./dist/es5.js"></script>
2. 初始化项目,创建 package.json 文件
npm init -y
顺便修改其中 "scripts" 内容,简化编译转化命令
// 将 package.json 中的以下内容:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}
// 修改为:
"scripts": {
"build": "babel src/es6.js -o dist/es5.js"
}
3. 先全局安装 Babel-cli,再本地开发依赖安装 babel-cli 和 babel-preset-es2015
// -g 全局安装
cnpm i babel-cli -g
// -D 本地开发依赖安装
cnpm i babel-cli babel-preset-es2015 -D
4. 根目录下新建 .babelrc 文件,并输入:
{
"presets":[
"es2015"
],
"plugins":[]
}
5. 这样子 ES6 的开发环境就搭建好了,接下来就可以开心的写 ES6 代码了,写完可以运行 npm run build 命令进行转化了。
注:
虽说 babel-preset-es2015 已经过时了,但用起来简单方便,仅转化 ES6 基本够用,适合新手
若使用 babel-preset-env 可参考:官网 babel-preset-es2015 -> babel-preset-env
中文网站 https://www.babeljs.cn/docs/plugins/preset-env