ES6和Node.js的import和export

一根草文章 發表於 2019-12-21 17:47:00

记录一下import和export的几种写法。
<h3>1.ES6的导入和导出</h3>
0.入口文件为index.js，引用add-content.js的内容
1.  export default 方式，直接导出变量
add-content.js的内容如下
<div class="cnblogs_code">
<pre>1 function write() {
2 document.write('Hello World')
3 }
4
5 var app = {}
6 app.write = write
7
8 export default app;</pre>
</div>
index.js引用要这样写
<div class="cnblogs_code">
<pre>1 import app from './add-content'
2 app.write()</pre>
</div>
2.  export  { } 方式，适合同时导出多个变量
add-content.js的内容如下
<div class="cnblogs_code">
<pre> 1 function write() {
 2 document.write('Hello World')
 3 }
 4
 5 var app = {}
 6 app.write = write
 7
 8 export {
 9 app
10 }</pre>
</div>
index.js引用要加上引号，如下
<div class="cnblogs_code">
<pre>1 import { app } from './add-content'
2 app.write();</pre>
</div>
3. export与变量声明的简写方式
add-content.js的内容如下
<div class="cnblogs_code">
<pre>1 function write() {
2 document.write('Hello World')
3 }
4
5 export var app = {
6 write: write
7 }</pre>
</div>
index.js引用要加上引号，如下
<div class="cnblogs_code">
<pre>1 import { app } from './add-content'
2 app.write();</pre>
</div>
<h3>2.nodejs的导入和导出</h3>
0.入口文件为index.js，引用mock.js的内容
1.mock.js中使用module.exports方式导出
<div class="cnblogs_code">
<pre>1 module.exports = {
2 name: 'mock.js',
3 message: 'hello world'
4 }</pre>
</div>
index.js引用要这样写
<div class="cnblogs_code">
<pre>1 let mock = require('./mock')
2 console.info(mock.name)</pre>
</div>
2.mock.js中直接使用exports导出
<div class="cnblogs_code">
<pre>1 exports.name = 'mock'
2 exports.message = 'hello world'</pre>
</div>
index.js引用要这样写
<div class="cnblogs_code">
<pre>1 let mock = require('./mock')
2 console.info(mock.name)
3 console.info(mock.message)</pre>
</div>
其原理是将exports指向了module.exports，而module.exports在初始化时是一个空对象。
相当于在导出的文件里面添加了如下代码：
<div class="cnblogs_code">
<pre>1 var module = {
2 exports: {}
3 }
4 var exports = module.exports</pre>
</div>
3.导出时容易出现的两个错误
3.1 给exports赋值，如下
<div class="cnblogs_code">
<pre>1 exports = {
2 name: 'mock'
3 }</pre>
</div>
由第2部分知：exports是指向了module.exports，如果重新给exports赋值，它会指向新对象，而module.exports还是空对象。
3.2 module.exports和exports混用
<div class="cnblogs_code">
<pre>1 exports.name = 'mock'
2 exports.message = 'hello world'
3
4 module.exports = {
5 getName () {
6 return 'get name function'
7 }
8 }</pre>
</div>
由于对module.exports进行了赋值，所以exports方式添加的属性就会丢失，即访问不到name和message属性。
 
个人建议使用module.exports = { ... } 导出会比较清晰。
<h3>总结一下：</h3>
ES6 Moudle：import / export
浏览器使用也需要Babel的支持
CommonJS: require / module.exports or exports
node的模块化规范，浏览器使用时需要用browserify解析
AMD: require / defined
是requireJS的规范 define(['./a', './b'], function(a, b) {  //... })
 require是同步导入，支持动态导入，是值拷贝，导出值不会影响导入值；
import是异步导入，导入值会随导出值变化
备忘~
  
来源：https://www.cnblogs.com/jyughynj/p/12077674.html

頁: [1]

琼殿技术论坛's Archiver

ES6和Node.js的import和export