介绍
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
ES6 转化 ES5 的环境设置
这里介绍,用 Babel 配合 Webpack,将 ES6 转化为 ES5 代码。当然,也可以只用 Babel 或配合其他工具,详情见这里。
下面是详细的配置步骤:
第一步 安装 Node.js
点这里 下载安装。
第二步 创建Demo文件夹
文件夹命名为 webpack-babel-demo
。
第三步 命令行中到Demo文件夹的位置
打开命令行窗口。 cd
到 webpack-babel-demo
下。
第四步 初始化项目
在命令行输入: npm init
。按提示输入项目的信息。完成后会生成文件: package.json
。
第五步 安装依赖
在命令行中输入下面的内容:
npm install --save-dev babel-loader babel-preset-env webpack babel-core
安装成功后,package.json
后新增如下的内容:
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"webpack": "^3.6.0"
}
第六步 设置Babel
在 Demo文件夹下创建文件 .babelrc
。文件中输入以下内容:
{
"presets": ["env"]
}
第七步 配置Webpack
在 Demo文件夹下创建文件 webpack.config.js
。文件中输入以下内容:
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}
}
其中,entry
的值为源码的路径,output.path
为生成的代码的路径。
第八步 添加启动项目的命令
在 package.json
的 scripts
属性下添加如下内容:
"start": "webpack --config webpack.config.js"
第九步 测试
在 Demo文件夹下创建文件 index.js
。在 index.js
随便输入些 ES6 代码。如
var a = [1, 2, 3]
var b = [2, 3]
var res = [...a, ...b]
在命令行中输入 npm start
。运行结束后,在 Demo 文件夹的 dist
目录下会找到文件 bundle.js
。该文件内容为转化为 ES5 的代码。