Javascript

ES Modules in Node.js

本文主要是介绍ES Modules in Node.js,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

ESM 在 Node.js 中的支持情况

Node.js 在 8.5 版本过后,开始以实验特性支持 ESM

image

Node 中使用 ESM 的条件及步骤

  • Node 版本需大于 8.5
  • 模块文件名需为 mjs
  • 启动 node 时需加 experimental-modules 参数,该参数表示启用 Node.js 的实验特性
node --experimental-modules index.mjs
// ./module.mjs
export const foo = 'hello'

export const bar = 'world'
// ./index.mjs
import { foo, bar } from './module.mjs'

console.log(foo, bar)

// import fs from 'fs'

// fs.writeFileSync('./foo.txt', 'es module working')

// 内置模块兼容了 ESM 的提取成员方式
import { writeFileSync } from 'fs'
writeFileSync('./bar.txt', 'es module ')

// import _ from 'lodash'
// console.log(_.camelCase('ES Module'))

// 不支持,因为第三方模块都是导出默认成员
// import { camelCase } from 'lodash'
// console.log(camelCase('ES Module'))

ES Modules in Node.js 与 CommonJS 交互

  • ES Moudule 中可以导入 CommonJS 模块

  • CommonJS 中不能导入 ES Modules 模块

  • CommonJS 始终只会导出一个默认成员

  • 注意 import 不是解构导出对象

    // ./commonjs.js
    module.exports = {
      foo: 'commonjs exports value'
    }
    
    // 也可以使用 module.exports 别名 exports 导出
    exports.foo = 'commonjs exports value'
    
    // 不能在 CommonJS 模块中通过 require 载入 ES Module
    const mod = require('./es-module.mjs')
    console.log(mod)
    
    // ./es-module.mjs
    // ES Moudule 中可以导入 CommonJS 模块
    import mod from './commonjs.js'
    console.log(mod)
    
    // 不能直接提取成员,注意 import 不是解构导出对象
    import { foo } from './commonjs.js'
    console.log(foo)
    
    // export const foo = 'es module export value'
    

ES Modules in Node.js 与 CommonJS 的差异

```JavaScript
// ./cjs.js
// 加载模块函数
console.log(require)

// 模块对象
console.log(module)

// 导出对象别名
console.log(exports)

// 当前文件的绝对路径
console.log(__filename)

// 当前文件所在目录
console.log(__dirname)
```

```JavaScript
// ESM 中没有 CommonJS 中的那些模块全局成员
// console.log(require)
// console.log(module)
// console.log(exports)

// 文件 url 地址
console.log(import.meta.url) // file:///C:/Users/%E9%87%91%E8%AF%81%E5%BC%95%E6%93%8E/Desktop/es-module-in-node/03-differences/esm.mjs

// 将文件 url 转换成路径
import { fileURLToPath } from 'url'
import { dirname } from 'path'
const __filename = fileURLToPath(import.meta.url)
console.log(__filename) // C:\Users\金证引擎\Desktop\es-module-in-node\03-differences\esm.mjs
const __dirname = dirname(__filename)
console.log(__dirname) // C:\Users\金证引擎\Desktop\es-module-in-node\03-differences
```

ES Modules in Node.js 新版本进一步支持

新版的 node 无需再讲 js 扩展名改成 mjs,只需在 package.json 中 配置 type: module 即能按照 ES Module 的形式去工作,如果还想使用 Common.js ,只需将扩展名修改为 cjs

  • 创建 package.json

    // code package.json
    {
      "type": "module"
    }
    
    // ./module.js
    export const foo = 'hello'
    export const bar = 'world'
    
    // ./index.js
    // nvm 切换 node 版本, nvm use 12.10.0
    import { foo, bar } from './module.js'
    
    console.log(foo, bar)
    
    // ./index.js
    // nvm 切换 node 版本, nvm use 12.10.0
    import { foo, bar } from './module.js'
    
    console.log(foo, bar)
    
    // ./index.js
    // 需文件名修改为 .cjs
    const path = require('path')
    
    console.log(path.join(__dirname, 'foo')) // ReferenceError: require is not defined
    

Modules in Node.js - Babel 兼容方案

安装插件

yarn init -y

yarn add @babel/node @babel/core @babel/preset-env --dev

执行命令

yarn babel-node index.js --presets=@babel/preset-env

配置 .babelrc 文件,以上命令简化成:yarn babel-node index.js

{
 "presets": ["@babel/preset-env"]
}

preset 是 babel 插件的集合

image

使用单个插件

先移除 @babel/preset-env: yarn remove @babel/preset-env
yarn add @babel/plugin-transform-modules-commonjs --dev

修改 .babelrc 文件

{
  "plugins": [
    "@babel/plugin-transform-modules-commonjs"
  ]
}
这篇关于ES Modules in Node.js的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!