import export
These two guys correspond to the functions of es6 itself module.
The Javascript we wrote before has never had a modular system, so it is impossible to split a huge js project into small projects with relatively independent but interdependent functions, and then use a simple method to connect these small projects together.
This has the potential to cause two problems:
-
On the one hand, the js code becomes very bloated and difficult to maintain
-
On the other hand, we often pay attention to the position of each script tag in the html, because they usually have dependencies, and the wrong order may cause bugs
In order to solve the above-mentioned problems before es6, we have to use some solutions provided by third parties, there are mainly two kinds of CommonJS (server side) and AMD (browser side, such as require.js).
If you want to learn more about AMD, especially require.js, check out this tutorial: why modules on the web are useful and the mechanisms that can be used on the web today to enable them
Now we have the module function of es6, which is very simple to implement and can become a common module solution for servers and browsers.
The design idea of ES6 modules is to be as static as possible, so that the dependencies of the modules and the variables of input and output can be determined at compile time. Both CommonJS and AMD modules, can only determine these things at runtime.
It doesn’t matter if you don’t understand the above design ideas, let’s learn how to use them first, and then it’s not too late to study the design ideas behind them when you use them more and become proficient! OK, so let's get to the code...
traditional writing
First, let's review the writing of require.js. Suppose we have two js files: index.jsand content.js, now we want to index.jsuse content.jsthe returned result in, how do we do it?
First define:
//content.js
define('content.js', function(){
return 'A cat';
})
Then require:
//index.js
require(['./content.js'], function(animal){
console.log(animal); //A cat
})
How is CommonJS written?
//index.js
var animal = require('./content.js')
//content.js
module.exports = 'A cat'
Writing in ES6
//index.js
import animal from './content'
//content.js
export default 'A cat'
以上我把三者都列出来了，妈妈再也不用担心我写混淆了...
ES6 module的其他高级用法
//content.js
export default 'A cat'
export function say(){
return 'Hello!'
}
export const type = 'dog'
上面可以看出，export命令除了输出变量，还可以输出函数，甚至是类（react的模块基本都是输出类）
//index.js
import { say, type } from './content'
let says = say()
console.log(`The ${type} says ${says}`) //The dog says Hello
这里输入的时候要注意：大括号里面的变量名，必须与被导入模块（content.js）对外接口的名称相同。
如果还希望输入content.js中输出的默认值(default), 可以写在大括号外面。
//index.js
import animal, { say, type } from './content'
let says = say()
console.log(`The ${type} says ${says} to ${animal}`)
//The dog says Hello to A cat
修改变量名
此时我们不喜欢type这个变量名，因为它有可能重名，所以我们需要修改一下它的变量名。在es6中可以用as实现一键换名。
//index.js
import animal, { say, type as animalType } from './content'
let says = say()
console.log(`The ${animalType} says ${says} to ${animal}`)
//The dog says Hello to A cat
模块的整体加载
除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
//index.js
import animal, * as content from './content'
let says = content.say()
console.log(`The ${content.type} says ${says} to ${animal}`)
//The dog says Hello to A cat
通常星号*结合as一起使用比较合适。
终极秘籍
考虑下面的场景：上面的content.js一共输出了三个变量（default, say, type）,假如我们的实际项目当中只需要用到type这一个变量，其余两个我们暂时不需要。我们可以只输入一个变量：
import { type } from './content'
由于其他两个变量没有被使用，我们希望代码打包的时候也忽略它们，抛弃它们，这样在大项目中可以显著减少文件的体积。
ES6帮我们实现了！
不过，目前无论是webpack还是browserify都还不支持这一功能...
如果你现在就想实现这一功能的话，可以尝试使用rollup.js
他们把这个功能叫做Tree-shaking，哈哈哈，意思就是打包前让整个文档树抖一抖，把那些并未被依赖或使用的东西统统抖落下去。。。
看看他们官方的解释吧：
Normally if you require a module, you import the whole thing. ES2015 lets you just import the bits you need, without mucking around with custom builds. It's a revolution in how we use libraries in JavaScript, and it's happening right now.
转自：https://segmentfault.com/a/1190000004368132