Based on ES6, use react, Webpack, Babel to build modular JavaScript applications __java

If you want to build a new JavaScript application with react, and you want to practice the new features in ES6 syntax, and you even want to create reusable components and post them to NPM, how exactly do you implement these requirements? How you publish ES6 code to NPM and how to use that code in subsequent projects. It took me some time to solve these problems and now I would like to share with you the new knowledge I learned.

If you really don't want to read all the details, just look at the final effect of the code-you can read the last part directly.

Demand

Let's figure out what we really want and how to achieve it.

Our main goal is to create a react application using our custom react component based on ES6. The trickiest part of this is the custom react component. The following is a list of requirements for achieving these goals:

Custom components should be written using ES6; custom components should be fully self-sufficient (easy to use: Install, import, render); custom components should provide the style they need (refer to 2nd, self-sufficiency); Custom components should be installed through NPM (because Bower has many problems); All custom components should have unit tests and code coverage reports, plus sub-items--custom components should not be interdependent, but should be able to interact with each other.

In addition, we need some great debugging tools, such as code checking, source mapping (because the code needs to be compiled, so this is the necessary tool for debugging).

Handling Requirements

Now that we know all the requirements, we can start looking for ways to meet those needs. So, first you need to select the toolset and related libraries that we will use.

compiling

We want to develop the application based on ES6, the current browser does not fully support all the new syntax features, so we need to compile ES6 to ES5. At the same time, we want to use NPM to manage our custom components, and we need to choose a compatible COMMONJS toolset.

There are currently two popular options available for--browserify and Webpack. Both meet most of our needs, considering that our project needs to use a style file, and Webpack is very friendly to non JavaScript files (such as style files, pictures, font files), so eventually we will choose Webpack.

Webpack has been able to meet most of the requirements, and we'll add gulp.js to help us accomplish more tasks (such as unit testing, code coverage detection, static resource servos).

using ES6

Now that we know how to build code using Webpack and Gulp.js, how can we meet our first requirement--using ES6. We can use the translators to help us translate ES6 code into ES5 code that is supported by mainstream browsers. Currently popular translators are: Traceur, Babel.js, Typescript (barely), we will choose Babel.js, it has a better ecosystem (plug-ins, extensions, etc.). If you don't know what it is, keep in mind that this is a great project and I recommend that you read their documentation. Best of all, babel.js not only supports ES6 syntax, it can also compile jsx, so we can completely discard the standard react JSX compiler at the compile step.

If you only want to use babel.js, I recommend that you read their use documentation. Axel Rauschmayer, who has written "teach you how to use Babel.js", is also worth reading, and if you are interested in JavaScript, I highly recommend subscribing to his blog.

Self-sufficiency

Now that we've selected the ES6, let's discuss the issue of self-sufficiency. If we develop pure react components--and you can easily make them work independently (reusable)--you can even refer to the official guide to learn how to encode. But if we need to provide the default style within the component, how do we implement it?

Of course, we can choose the "pure JS" method to add inline style to our jsx file, just like this:

[JS] view plain Copy const render = function () {Const DefaultStyle = {color: ' Red ',};   Return (<div style={defaultstyle}> I have inline styles </div>); };

JSX inline style

There is a problem with this approach that we can hardly control the style of this component through the parent application. Also, if we need to load pictures or custom font files, this method will fail. So, is there a better way?

Webpack can help you solve this problem. Fortunately, the Webpack loader can load many types of files. The idea behind it is very simple--dynamically pluggable transitions to loaded files during loading. In essence, the loader handles various files for us. We will use a special babel-loader to translate our ES6 code into ES5 code.

But the coolest thing is that the loader can handle any file. So, if we want to load the style--we just need to add style-loader. Finally, I decided to use less, which is a little more complicated--I'll create the following load chain:

First, use Less-loader to process the *.less file, convert it to CSS, and then use Css-loader to pass the compiled CSS to the next step, and finally, use Style-loader to introduce the final style into the generated code.

With this load chain, we can use less to write the style of the component, which illustrates the entry point of this component:

[JS] View plain copy import './style/style.less ';   Import Component from './src/component ';   &nbsp; Export default Component;

Introducing styles into JavaScript with the help of Webpack

As you can see, load styles are as simple as importing files. Indeed, the load chain consisting of Less-loader, Css-loader, and Style-loader must be configured in advance in our Webpack configuration (see the first example in the next section).

Now we can load styles from separate components, but CSS uses global variables by default, which means that if the same class name is used in two components, one of them will be overwritten, how can we avoid the problem?

The easiest way I can figure it out is to create a component's scope artificially by using the component name as the class name of the outermost element in the HTML tag and the style file. Just like this:

[JS]   View plain copy .component-name {     span {        color: red;     }  }      const render =