Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about the method of Webpack packaging ES6 and CommonJs. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

When we first use the CommonJs syntax, we only need to use the most basic configuration:

# npm install babel-core babel-loader-save-dev

After installing babel-core and babel-loader, the following is to write the Webpack configuration file, the default file name is webpack.config.js. Of course, you can also use other file names (such as wpconfig.js), but add the-- config parameter when using the webpack command:

# webpack-config wpconfig.js

The configuration file is as follows

Module.exports = {

Entry: {

Module:'. / src'

}

Output: {

Path:'. / builds'

Filename: 'onmpw.js'

}

Module: {

Loaders: [

{

Test: / / .jsx? $/

Loader: 'babel'

}

]

}

}

If you want to use jsx in your react code, you must install babel-preset-react and then modify the webpack configuration file

# npm install babel-preset-react-save-dev

The following is part of the configuration file

{

Test: / / .jsx? $/

Loader: 'babel-loader'

Query: {

Presets: ['react']

}

}

Next, if you want to use ES6 syntax in React, make your environment support ES6 or ES2015

# npm install babel-preset-es2015-save-dev

The following is part of the configuration file

{

Test: / / .jsx? $/

Loader: 'babel-loader'

Query: {

Presets: ['react',' es2015']

}

}

Finally, if you want your environment to support some of the ES7 experimental features, you can continue with the following upgrades

# npm install babel-preset-stage-0-save-dev

The configuration file is as follows:

{

Test: / / .jsx? $/

Loader: 'babel-loader'

Query: {

Presets: ['react',' es2015', 'stage-0']

}

}

In view of the above cases, the following is a piece of code, including these cases.

Var FancyCheckbox = React.createClass ({

Render: function () {

Var {checked,... other} = this.props

Var fancyClass = checked? 'FancyChecked': 'FancyUnchecked'

/ / `other` contains {onClick: console.log} except the checked attribute

Return (

);

}

});

ReactDOM.render (

Hello world!

Document.getElementById ('example')

);

Finally, we need to pay attention to it. Babel does not support the separate compilation of all ES6 code, and it needs some runtime support to implement it. Typically, the new ES6 built-in methods, such as Set,Map and Promise, must be supported by polyfilled. And the implementation of Babel parser also needs a series of auxiliary running environment. The method to install polyfilled is as follows

# npm install babel-polyfilled-save

At the same time, Babel compiles the code of these small aids directly into your code. There is no problem with a single small file. But if you bind these to Webpack, repeating the code will result in a very large file. In view of this situation, it is more appropriate to replace these assistive tools with babel-runtime packages with transform-runtime plug-ins.

# npm install babel-runtime-save

# npm install babel-plugin-transform-runtime-save-dev

Of course, after installing these, we also need to upgrade our Webpack configuration file as follows:

{

Test: / / .jsx? $/

Loader: 'babel-loader'

Query: {

Plugins: ['transform-runtime']

Presets: ['react',' es2015', 'stage-0']

}

}

These are all the contents of this article entitled "Webpack's way to package ES6 and CommonJs". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.