Http://es6rocks.com/2014/10/es6-modules-today-with-6to5? Utm_source = javascriptweekly & utm_medium = Email original link
I posted a photo on Twitter to express how happy I am. It is like a time machine that allows us to move to the future-es6 era! Let me show you how to use 6to5 to implement the modularization of es6 today.
With 6to5, We can practice the first step of es6 modularization today.If you do not know about the modular development of es6, see jsmodules. Io. I also recommend you read @ jcemer's article a new syntax for modules in es6, which involves a lot of cool things about JS modularization. He can instruct us to use 6to5. In general, 6to5 can try es6 modular development in advance in an environment that supports es5d. 6to5 has several advantages over other downgrade tools: * Readability: Your formatted code is retained as much as possible. * Scalability: supports a very large plug-in library and browser. * Adjustable: Because source map is supported, you can easily debug the compiled code. * High Efficiency: directly convert the code into code equivalent to es without additional operations.
Write modules togetherLet's try to write a module! Our application will not do anything except output logs. Its main purpose is to let you know how modularity works and how to make your existing environment use es6 modular development. Basic directory structure:
├── Gruntfile.js├── package.json└── src ├── app.js ├── modules │ ├── bar.js │ ├── baz.js │ └── foo.js └── sample └── index.htmlApp. JS is the main program and contains the modular directory we will store. below is the code of APP. JS:
import foo from "./modules/foo";import bar from "./modules/bar";console.log(‘From module foo >>> ‘, foo);console.log(‘From module bar >>> ‘, bar);The above code is very simple. We imported the foo module and the bar module and printed them separately.
// foo.jslet foo = ‘foo‘;export default foo;// bar.jslet bar = ‘bar‘;export default bar;In these modules, we only export two strings 'foo' and 'bar'. When we import these modules, our variables actually have data. Of course, why do we export objects, classes, functions, and so on? Now, you can imitate this example to write your own modules.
BuildAs you already know, es6 does not support your current browser and node. js. There is only one way, that is, to use a downgrade converter to write es6 modular code. As I mentioned earlier, I use 6to5, which can precisely achieve what we want. This task is running on grunt, we use @ sindresorhus grunt-6to5
npm install grunt-cli -gnpm install grunt --save-devnpm install grunt-6to5 --save-devOur gruntfile is similar to the following:
grunt.initConfig({ ‘6to5‘: { options: { modules: ‘common‘ }, build: { files: [{ expand: true, cwd: ‘src/‘, src: [‘**/*.js‘], dest: ‘dist/‘, }], } }});To test it in the browser, I made a copy task that just copies the sample/index.html file to our Dist directory. The HTML file looks like this:
This is a simple and powerful configuration, and we have almost completed it. After you specify the source file and output file, this task can be run. The 'common' option aims to tell 6to5 that we will output the es5commonjs modular style. Of course, 6to5 also supports AMD. I wrote sample/index.html and asked him to test it in a browser environment. The HTML code is as follows:
<!doctype html> Observe the above Code. We use the amd requirejs framework to load this Js. For this example, you need to change the above configuration file to modules: 'amd'
Run Everything is ready Dongfeng only owe, our code has been put in the es6-modules-today-with-6to5, you can clone yourself to play. Use NPM install to install 6to5
Remember, the grunt task will generate a target folder to store the converted code. Therefore, if you want to test the converted es6 code using the commonjs specification, You can execute the following command:
Node Dist/APP. js
Running Effect on node. js If you use amdscripts, please upload index.html in the browser (for a bit, foreigners don't even know China's sea. JS)
Result conclusion of browser execution Through this simple example, you learned how to write code simply using the es6 modular style. 6to5 is a tool for gastrointestinal rods that allows you to experience the pleasure of es6 Modularization in advance. Resource download es6-modules-today-with-6to5, welcome to submit some feedback
From http://www.hacke2.cn
With 6to5, let's write the modular development of es6 today!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
