Install Babel and The Presets:
npm install --save-dev babel-core babel-preset-es2015
Install babel-loader
:
npm install --save-dev babel-loader
Configure 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.bund Le.js ',}, module: {loaders: [{test:/\.js$/, exclude:/node_modules/, Loader: ' Babel-loader ',}]}}
We are excluding Node_modules here because otherwise all external libraries would also go through Babel, slowing down compilation.
Install the libraries want to use (in this example, JQuery):
npm install --save jquery babel-polyfill
We are using --save
the instead --save-dev
of this time, as these libraries'll be the used in runtime. We also use So, babel-polyfill
ES2015 APIs is available in older browsers.
Edit src/app.js
:
import ‘babel-polyfill‘; import cats from ‘./cats‘; import $ from ‘jquery‘; $(‘
Bundle the modules using Webpack:
webpack
Add so this index.html
app can be run:
<!DOCTYPE html><body> <script src="bin/app.bundle.js"></script>
Webpack ES6 Support Configuration