Es6+require Hybrid development, compatible with ES6 Module,import,export's loaded CSS and public date-main

Hello everyone! The previous article has introduced the building folder, as well as loading JS files. Now let's talk about loading CSS, and understanding of BaseURL.

1. Understanding of the project structure

The structure of a project is determined by the architecture of the project, and of course it can be smarter, but it doesn't make much sense. Look at my structure below.

I used the third-party library (JS), the ES6 Code (test), the compiled ES5 code (SRC), the style sheet file (CSS). Require css.js is used in the project to load the CSS file.

How to install a plugin for example NPM install--save-devbabel-plugins-transform-es2015-classes

2. Common Babel Tools

• Check-es2015-constants//Verify that const constants are re-assigned
• Transform-es2015-arrow-functions//Compile arrow function
• Transform-es2015-block-scoped-functions//function declaration within scope
• transform-es2015-block-scoping//Compile const and let
• Transform-es2015-classes//Compile class
• Transform-es2015-computed-properties//Compiling computed object properties
• transform-es2015-destructuring//Compile deconstructed assignment
• Transform-es2015-duplicate-keys//The duplicate key in the compiled object is actually converted to a computed object property
• transform-es2015-for-of//Compile For...of
• Transform-es2015-function-name//Apply function.name semantics to all function
• Transform-es2015-literals//compiled integers (8 binary/16 binary) and Unicode
• TRANSFORM-ES2015-MODULES-COMMONJS//compile modules into Commonjs
• TRANSFORM-ES2015-MODULES-AMD//compile modules into Amdjs
• Transform-es2015-object-super//Compile Super
• Transform-es2015-parameters//compile parameters, including default parameters, indeterminate parameters and refactoring parameters
• Transform-es2015-shorthand-properties//Compile attribute abbreviation
• Transform-es2015-spread//Compile expansion operator
• Transform-es2015-sticky-regex//Regular Add sticky property
• Transform-es2015-template-literals//Compile template string
• Transform-es2015-typeof-symbol//Compile symbol type
• Transform-es2015-unicode-regex//Regular add Unicode mode
• Transform-regenerator//Compile generator function

3. Loading css.js file

First Take index.html as an example, the page introduced Main.js, Main.js loaded in the page, in fact, this time all the relative path to the HTML file as standard, not main.js

The project does not want Main.js to be compiled each time, and to common main portal file (dynamically change the usageof base RL will be explained in the next article), so it is placed in the JS folder. Dynamically loading files, you need to calculate file names. Corresponding care, here is a simple example.

Here the page points to the Login.js content as follows, the introduction of the file with import

BaseUrl points the directory to the root directory, the page where index is located. Loading CSS to use the css.js, the use of the form has been written. Want to let the CSS page effect first experience, not page deformation, so the introduction of JS file into the CSS request callback function.

By BaseURL the relative path has been located to the project root, so after use, the direct use of the folder name can be.

The next step is to change the "page,styles" into dynamic acquisition, the next article specifically explained the use.

Es6+require Hybrid development, compatible with ES6 Module,import,export's loaded CSS and public date-main