ES6 write the file import up solution details _ basic knowledge

This period of time, learn a little about es6 new norms of knowledge, and then whim, want to try to write with ES6 code in the browser run.

Say dry, first said my implementation steps (did not expect to have a pit!) ）

1. Translating ES6 code into ES5;
2. The HTML file introduces the translated ES5;
3. Then run in the browser environment;
4. Run in the node environment;

Then here are some of my directory structures, roughly previewed.

SRC,ES6 Development Directory

DIST,ES5 Production Catalogue

Test, a testing directory

Then, look at my ES6 development of some JS what it looks like.

File File2 App

Test

Then we introduce the translated files in the Dist in HTML

Test in the browser, because the module is not introduced in test, so the normal execution, the app because the introduction of the module, but also is the COMMONJS specification, but the browser does not support this specification, so the error

If we add requirejs files to the HTML for the quiz, the browser supports the AMD/CMD specification. The definition is loaded asynchronously.

However, we found that there is still an error, indicating that the syntax is not supported, or both conflict, because one is AMD, one is COMMONJS.

Since we compile ES6 into Es5,node modules by node to refer to the COMMONJS specification, the ES5 syntax is also a COMMONJS specification, and now browsers and node do not support ES6 specifications or most of them.

Solving method

After looking at the data, it is found that the Webpack packaging tool can be used to merge dependencies into a single file and then introduce HTML.

Thank you for reading, I hope to help you, thank you for your support for this site!