基本的 ES6 的转换其实有 Babel 自己就够了,但是涉及到 ES6 模块,就需要 Webpack 这个打包工具的参与了。Webpack 使用的更多技巧可以参考 好奇猫#Webpack-React 环境搭建技巧 课程。我们这一集里面做一个最简单的版本,达成:
这两个目标即可。这个环境实际开发中用显得简陋了,但是在学习 ES6 基础的时候用是正好合适的。
新建项目文件夹
mkdir es6-compile
cd es6-compile
初始化 node 项目
npm init // 生成 `package.json`
安装 webpack,babel 的 npm 包
npm install --save-dev webpack babel-loader babel-core babel-preset-env
--save-dev
的作用就是把包的版本信息保存的 package.json 中的恰当位置。
更多信息参考:
首先要保证 Babel 的正常运行,需要在项目根目录下创建 .babelrc 配置文件,内容如下:
{
"presets": ["env"]
}
然后,webpack 使用时,也需要增加它的配置文件,在配置文件里,记录 webpack 各项配置,它的配置文件名默认 webpack.config.js
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src/index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
}
};
上面的配置文件中,有三大要素需要知道,具体语法可以不用死记:
为了每次运行命令方便,到 package.json 文件中,把 script 一项改为
"scripts": {
"build": "webpack"
},
这样,以后每次编译项目就
npm run build
即可。
先来添加源码,创建
src/index.js 内容如下:
import hello from './my-module'
console.log(hello)
src/my-module.js 内容如下:
let name = 'Peter';
export default name;
命令行中运行
npm run build
就可以得到 dist/bunle.js
这个问题了,运行命令
$ node dist/build.js
Peter
输出 Peter
,表示我们的环境已经运转正常了。