export关键字

1、建立html

  引入app.js
  
  <!--告诉浏览器以ESModule的规范解析-->
<script src="app.js" type="module"></script>

2、模块入口app.js

3、module.js

---

1、基本用法

module.js

//导出常量、变量
export const myName = 'zs'
//导出函数
export function hello() {
    console.log('hello')
}
//导出类
export class Person {}

app.js

import { myName, hello, Person } from './module.js'

console.log(myName);
hello()
const p1 = new Person()

2、一次性导出

module.js

const myName = 'zs'

function hello() {
    console.log('hello')
}
class Person {}

// 注意：这里的{}不是对象，是导出符号
export {
    myName,
    hello,
    Person
}

app.js

// 2、一次性导出
// 注意： 这里的{}不是对象，只是提取符号
import { myName, hello, Person } from './module.js'

console.log(myName);
hello()
const p1 = new Person()

3、as别名

modules.js

const myName = 'zs'

function hello() {
    console.log('hello')
}

class Person {}

export {
    myName as zsName,
    // default是关键字，导出的时候如果as转换为default，那么在导入的时候要把defalt在转换成其他名称
    hello as default
}

app.js

// 3、as别名
import { zsName, default as sayHi } from './module.js'

console.log(zsName)
sayHi()

4、结合default

module.js

const myName = 'zs'

function hello() {
    console.log('hello')
}

class Person {}


export default myName
// 注意： 这个时候 {}
// 是对象了
 export default {
     myName,
     hello,
     Person
 }

app.js

// 4、default
import myName from "./module.js";

console.log(myName);

import module from './module.js'

console.log(module);

5、导入的变量和导出的变量是地址相等的

modules.js

export let myName = 'lisi'
setTimeout(() => {
    myName = 'zs'
}, 1000)

app.js

import { myName } from "./module.js";
// console.log(myName)

setTimeout(() => {
    console.log(myName);
}, 2000)

6、导出的成员在导入之后只能用，不能改变(导入的是一个对象， 那么是可以修改对象中的属性值的)

modules.js

export let myName = 'lisi'
export let myObj = {
  myName: 'lisi'
}

app.js

import { myName } from "./module.js";
myName = 'zs' // Assignment to constant variable.

// 注意： 导入的是一个对象， 那么是可以修改对象中的属性值的
import { myObj } from "./module.js";
myObj.myName = 'zs'
console.log(myObj);

import

1、建立html

  引入app.js
  
  <!--告诉浏览器以ESModule的规范解析-->
<script src="app.js" type="module"></script>

2、module.js

const myName = 'zhangsan'
const age = 18

export {
    myName,
    age
}

console.log('module.js 执行了')

export default '我是在export default中导出的'
export const count = 100

3、模块入口app.js

1、导入的时候，模块名称的后缀名不能省略

import {myName} from "./module";

import {myName} from "./module.js";

2、导入目录模块:会自动寻找目录模块下面的index.js

建立utils文件夹

里面设置index.js

/**
 * 把接收到的字符串转成小写的  NODE.js => node.js
 * @param str
 * @returns {string}
 */
export function lowercase(str){
    return str.toLowerCase()
}

app.js导入目录模块:会自动寻找目录模块下面的index.js

import { lowercase } from "./utils";
 import {lowercase} from "./utils/index.js";

console.log(lowercase('NODE.js'));

3、 导入模块的时候， 会自动执行被导入的模块中的代码

只想执行模块中代码， 不会提取任何模块中的成员

import {} from './module.js'
可以简写为
import './module.js'

4、 把所有导出的成员放到一个对象中

    import * as mod from './module.js'
console.log(mod)
console.log(mod.myName);
console.log(mod.default);

5、 不能够把import语句写在嵌套语句中

if (true) {
    // import 只能在模块的最外层进行导入
    import * as mod from './module.js'
}

6、导入的时候不能用变量来保存模块的路径

Unexpected identifier 'mPath'
const mPath = './module.js'
import * as mod from mPath

7、 可以使用import() 函数来导入模块

//结果放在than函数中
import ('./module.js').then((module) => {
    console.log(module)
})

8、导入default转换变量保存

import { myName, age, count, default as title } from './module.js'
import title, { myName } from './module.js' // 推荐

console.log(myName);
console.log(title);

export-import

1、建立html

  引入app.js
  
  <!--告诉浏览器以ESModule的规范解析-->
<script src="app.js" type="module"></script>

2、建立module.js

const foo = 'hello'
const bar = 'node.js'

export{
foo,
bar
 }

3、模块入口app.js

多个模块数据流动

import { foo, bar } from './module.js'

export {
  foo,
  bar
}
console.log(foo, bar)

简化数据导入和导出

//导出数据
export { foo, bar }
from './module.js'
    // 此时， 在当前文件中就无法使用foo， bar了
console.log(foo, bar) // app.js:12 Uncaught ReferenceError: foo is not defined

3、导入组件

组件文件conponents

设置两个js

import { Avatar } from "./components/avatar.js"
import { Button } from "./components/button.js"

console.log(Button)
console.log(Avatar)

4、统一管理组件

组件文件conponents

index.js

// 1、
import { Avatar } from "./avatar.js"
import { Button } from "./button.js"

export {
   Avatar,
   Button
}

// 2、简写
export { Button }
from './button.js'
export { Avatar }
from './avatar.js'

app.js

import { Button, Avatar } from "./components/index.js";
console.log(Button)
console.log(Avatar)

export-imponents-in-node

01、esm-suppoort

1、建立module.mjs

export const foo = 'hello'
 export const bar = 'bar'

建立index.mjs

// 第一。文件后缀名应该是.mjs
// 1、导入数据
import { foo, bar } from './module.mjs'

console.log(foo, bar);

// 2、导入node.js中内置模块 require()
import fs from 'fs' // const fs = require('fs')
// console.log(fs)
try {
    fs.writeFileSync('./foo.txt', 'es module workding')
} catch (err) {
    console.log(err)
}

// 3、提取node.js中内置模块中的成员 !!!
const { writeFileSync } = require('fs') //ok
import { writeFileSync } from 'fs'//等价于上一行
writeFileSync('./foo.txt', 'es module workding')


// 4、npm init -y 可以用默认的方式把一个目录转换成npm管理的包
// 导入第三方模块
import _ from 'lodash'//lodash用来判断数组...
//浏览器搜索npm里面搜索lodash里面的does
console.log(_.camelCase('Foo Bar'));//驼峰命名的方式

// 5、一般情况，第三方模块不能提取成员 !!!!
import { camelCase } from 'lodash'

import { default as _ } from 'lodash'
console.log(_.camelCase('Foo Bar'));

02、interoperability

commonnjs.js

commonjs模块中的导出的成员是由module.exports决定

//1、commonjs中导出成员
//  1.1覆盖
module.exports = {
   foo: 'commonjs module exports value foo'
}
//导入两次会覆盖
module.exports = {
   bar: 'commonjs module exports value bar'
}

// 1.2
exports.foo = 'commonjs exports value'
exports.bar = 'commonjs exports value'

// 1.3
exports.obj = {
   foo: 'foo'
}


// 通过exports等于一个对象的方式导出，不可以的！
// 注意：exports导出的时候只能用.的方式导出
exports = {
   foo: 'foo'
}

// 2、commonjs中导入es module规范的成员是无效的。
const mod = require('./es-module.mjs')
console.log(mod)

结论

1、ES Modules中可以导入CommonJS模块

2、CommonJS中不能导入ES Modules模块

3、CommonJS中始终只会导出一个默认成员module.exports（覆盖）

es-modules.mjs

1、ES Module中导入CommonJS模块 如果是module.exports导出的，不能在导入的时候直接提取成员

import foo from  './commonjs.js'
console.log(foo);

import cvalue from  './commonjs.js'
console.log(cvalue);

// 2、在ES Module中导出
// export const foo = 'es module export value'

03、differentce

commer.js

require\module\exports__filename__dirname

加载模块函数

  console.log(require)

导出对象别名

  console.log(exports);//{}空对象

模块对象

  console.log(module)//对象

当前文件的绝对路径

console.log(__filename)

当前文件所在的目录

 console.log(__dirname)

1、在node加载模块之后，会把这个模块中的所有的成员给放到一个函数中

加载模块函数

console.log(require)

导出对象别名

   console.log(exports);//{}

模块对象

   console.log(module)

当前文件的绝对路径

  console.log(__filename)

当前文件所在的目录

   console.log(__dirname)

}

esm.mjs

1、ES Modules中不存在这些全局的成员

加载模块函数

console.log(require)

导出对象别名

console.log(exports); 

模块对象

 console.log(module)

当前文件的绝对路径

 console.log(__filename)
 

当前文件所在的目录

console.log(__dirname)

2、代替

2.1、require=>import

2.2、exports=>export

2.3、代替__filename的方式

方式一：import对象的meta属性

const currentUrl = import.meta.url
console.log(currentUrl);

方式二：通过node的内置url模块

import { fileURLToPath } from 'url'
import { dirname } from 'path'

const currentUrl =
   import.meta.url
   // 把获取到的__filename的url转成__filename
const __filename = fileURLToPath(
   import.meta.url)
console.log(__filename);

const __dirname = dirname(__filename)
console.log(__dirname);