Abstract: Babel is a transcoder, webpack is a packaging tool, how should they be used together?

  • GitHub repository: Fundebug/webpack-babel-tutorial

ES6 + IE10 = syntax error!

Test.js uses ES6’s arrow function:

setTimeout((a)= >
{
    console.log("Hello, Fundebug!");
}, 100)
Copy the code

Since older browsers don’t support ES6 syntax, this means that the code is prone to errors. For example, in Internet Explorer 10, a “syntax error” appears:

If you use the Fundebug error monitoring service, you will receive an error message like this:

Use Babel transcoding directly

When you use a higher version of JavaScript syntax, such as ES7, a lower version of the browser will not work. In order to be compatible with lower versions of browsers, such as the evil Internet Explorer, we had to use Babel to convert ES6, ES7 and other higher versions of code into ES5 code.

The installationbabel-cli

sudo npm install --global babel-cli
Copy the code

Use the Babel command to transcode

babel test.js --out-file compiled.js
Copy the code

The code generated after transcoding is compiled. Js:

setTimeout(function () {
    console.log("Hello, Fundebug!");
}, 100);
Copy the code

The arrow function is converted to function so that the code executes correctly on non-ES6-enabled browsers such as IE 10.

Advertising: Free trial is welcomeFundebug, to help you find code bugs the first time.

Run Babel with Webpack

In general projects, webpack is used to package the code. For example, multiple JS files are packaged into one JS file, which can reduce resource requests on the front end. Therefore, we need to integrate Babel into WebPack as well.

Install webpack

npm install --global webpack
Copy the code

The WebPack version I use is 4.10.0

Webpack - version 4.10.0Copy the code

Install Babel

npm install --save-dev babel-cli babel-preset-env
Copy the code

Babel-preset -env is a new version of Babel, which allows us to preset the code target execution environment flexibly, such as supporting only the latest 2 versions of each browser, and SUPPORTING Internet Explorer 8 and above.

Install Babel – loader

npm install --save-dev babel-loader
Copy the code

Babel-loader is a Babel plug-in for WebPack that allows us to run Babel in wepback.

Configure the Babel

Add. Babelrc file:

{
    "presets": ["env"]
}
Copy the code

Configuration webpack

Add webpack.config.js file:

module.exports = {
    entry: './test.js'.output:
    {
        path: __dirname,
        filename: 'bundle.js'
    },
    module:
    {
        rules: [{test: /\.js$/.exclude: /node_modules/.loader: 'babel-loader'}}};Copy the code

As you can see, we used the babel-loader plug-in in webpack to run Babel and convert all the.js code (except the code in node_modules).

Run Babel with Webpack

webpack --mode production
Copy the code

The converted code is bundle.js. Bundle.js has only one line of code because the mode specified for us is production and Webpack only generates one line of code to compress the code.

reference

  • Webpack works with Babel to turn ES6 into an es5 super-simple instance
  • Introduction to Babel
  • babel-preset-env: a preset that configures Babel for you

About Fundebug

Fundebug focuses on JavaScript, wechat applets, wechat mini games, Alipay applets, React Native, Node.js and Java real-time BUG monitoring. Since its official launch on November 11, 2016, Fundebug has handled more than 700 million error events in total, which has been recognized by many well-known users such as Google, 360, Kingsoft, and People’s Net. Welcome free trial!

Copyright statement

Reprint please indicate the author Fundebug and this article addresses: blog.fundebug.com/2018/06/13/…