How to get the HTML file that introduces ES6 to run

During this time, I learned a little bit about ES6 's new specification, and then, on a whim, wanted to try the code written in ES6 to run in the browser.

Say to do, first of all, the implementation of my steps (did not think there is a pit!) ）

1. Translate the ES6 code into ES5;
2. HTML files are introduced into the ES5 after translation;
3. Then run in the browser environment;
4. Run in node environment;

Then here is some of my directory structure, a preview of a bit.

SRC,ES6 Development Directory

DIST,ES5 Production Catalogue

Test, a testing directory

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

File File2 App

Test

Then we introduce the translated files in the Dist in HTML

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

If we add requirejs files to the HTML for the test, the browser supports the AMD/CMD specification. Asynchronously loads the definition.

However, we find that there are still errors, stating that the syntax is not supported, or that the two are conflicting because one is AMD and the other is COMMONJS.

Since we compiled ES6 into Es5,node module through node is the reference COMMONJS specification, so ES5 syntax, also belongs to the COMMONJS specification, and now the browser and node do not support the specification of ES6 or most do not support.

Workaround

After reviewing the data, it was found that the Webpack packaging tool could be used to combine dependencies into one file and then into HTML.

How to get the HTML file that introduces ES6 to run