如何让 Node 支持ES module 导入

如何让 Node 支持 ES Module 导入

模块化

1. CMD/AMD/requrie.js
2. CommonJS
   • 加载：require()
   • 输出： module.exports / exports.x
3. ES Module
   • 加载：import
   • 输出：export default / export function / const x

方法

1. 使用 Webpack

   在项目中安装 webpack webpack-cli

   npm i webpack webpack-cli -D
   

   安装 babel

   npm i -D babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime babel\runtime-corejs3
   

   在目录下 创建 webpack.config.js 配置文件 @babel/plugin-transform-runtime

   const path = require('path')
   // 使 config 在 vscode 下拥有 ts 代码补全
   /** @type {import('webpack').Configuration} */
   const config = {
       entry: './core.js', // 输入文件
       output: {
           path: path.join(__dirname, '/dist'), // 输出文件
           filename: 'core.js',
       },
       mode: 'development', // 打包模式
       target: 'node', // 运行环境默认 web, 应该改为 node 才能进入 node 环境
       module: {
           rules: [
               {
                   test: /\.js$/, // 处理所有 .js 文件
                   exclude: /(node_modules|dist)/, // 排除 node_modules、dist
                   use: {
                       loader: 'babel-loader', // 使用 babel-loader
                       options: {
                           presets: ['@babel/preset-env'], // 预设 babel 环境
                           plugins: [ // 插件
                               [
                                   '@babel/plugin-transform-runtime',
                                   // 提供处理 async、await 转译后调用的 regeneratorRuntime 变量
                                   {
                                       corejs: 3, // 指定 runtime-corejs 的版本，目前有 2 3 两个版本
                                       regenerator: true,
                                       useESModules: true,
                                       helper: true
                                   }
                               ]
                           ]
                       }
                   }
               }
           ]
       }
   }
   module.exports = config
   

   // core.js
   import { test } from './utils'
   
   test()
   

   // utils.js
   export function test() {
       console.log('utils')
   }
   

   index,js
   require('../dist/core')
   

2. 使用 Node 原生模式 .mjs

   将文件后缀名改为 .mjs, 同时将所有 require 导入改为 import 导入，同时导入的时候必须填写完整文件名

   // index.mjs
   import './core.mjs'
   

   // core.mjs
   import { test } from './utils.mjs'
   
   test()
   

   // utils.mjs
   export function test() {
       console.log('utils')
   }
   

   执行

   Node 版本 14及以上 的可直接执行

   node index.mjs
   

   Node 版本 大于等于8，小于14 需加上 --experimental-modules 才能正常执行

   node --experimental-modules index.mjs