Shulou(Shulou.com)05/31 Report--

The main content of this article is to explain "Webpack packaging ES6 and CommonJs mixed React method", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor to take you to learn "Webpack packaging ES6 and CommonJs mixed React method"!

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']

}

}

At this point, I believe you have a deeper understanding of "Webpack packaging ES6 and CommonJs mixed React method". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.