标签：
Install Babel and the presets:
npm install --save-dev babel-core babel-preset-es2015Install babel-loader:
npm install --save-dev babel-loaderConfigure Babel to use these presets by adding .babelrc
{ "presets": [ "es2015" ] }Modify webpack.config.js to process all .js files using babel-loader.
module.exports = {
entry: ‘./src/app.js‘,
output: {
path: ‘./bin‘,
filename: ‘app.bundle.js‘,
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: ‘babel-loader‘,
}]
}
}We are excluding
node_moduleshere because otherwise all external libraries will also go through Babel, slowing down compilation.
Install the libraries you want to use (in this example, jQuery):
npm install --save jquery babel-polyfillWe are using
--saveinstead of--save-devthis time, as these libraries will be used in runtime. We also usebabel-polyfillso that ES2015 APIs are available in older browsers.
Edit src/app.js:
import ‘babel-polyfill‘;
import cats from ‘./cats‘;
import $ from ‘jquery‘;
$(‘<h1>Cats</h1>‘).appendTo(‘body‘);
const ul = $(‘<ul></ul>‘).appendTo(‘body‘);
for (const cat of cats) {
$(‘<li></li>‘).text(cat).appendTo(ul);
}Bundle the modules using webpack:
webpackAdd index.html so this app can be run:
<!DOCTYPE html><body>
<script src="bin/app.bundle.js"></script>标签：
原文地址：http://www.cnblogs.com/rongfengliang/p/5585674.html
