这是我参与更文挑战的第5天，活动详情查看： 更文挑战

一、Node项目如何支持ES Module

1.安装webpack及配置

npm i -D webpack webpack-cli
复制代码

配置webpack.config.js文件

const path = require('path')

module.exports = {
  entry: './bin/core.js',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'core.js'
  },
  mode: 'development',
}
复制代码

1. __dirname是指当前文件
2. dist目录，会在打包的过程中创建目录，
3. filename是文件的名称，
4. mode是指当前的模式，是生产模式还是打包模式

创建解析文件core.js

module.exports = function () {
  console.log('hello webpack')
}
复制代码

并在index.js文件中引用，注意，我们引用的是打包后的文件

require('../dist/core')
复制代码

然后我们执行zl1-test命令，

得到以上输出，我们就成功了

2.支持node内置库

npm i -S path-exists
复制代码

在utils.js文件中使用

import pathExists from 'path-exists'

export function exists(p) {
  return pathExists.sync(p)
}
复制代码

core.js

import path from 'path'
import { exists } from './utils'

console.log(path.resolve('.'))
console.log(exists(path.resolve('.')))
复制代码

执行npm run build时会报以下错误

修改webpakc.config的配置

target: 'node'
复制代码

设置为node,编译为类node环境，再次执行命令

编译成功

二、配置babel-loader支持低版本node

1.babel-loader支持低版本node

 npm i -D babel-loader @babel/core @babel/preset-env
 npm i -D @babel/plugin-transform-runtime
 npm i -D @babel/runtime-corejs3
复制代码

上边是需要安装的依赖

core.js

(async function() {
  await new Promise(reslove => setTimeout(reslove, 10000));
  console.log('ok');
})();
复制代码

配置webpack.config文件

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [
              [
                '@babel/plugin-transform-runtime',
                {
                  corejs: 3,
                  regenerator: true,
                  useESModules: true,
                  helpers: true
                }
              ]
            ]
          }
        }
      }
    ]
  }
复制代码

配置plugins时，请一定要安装好@babel/plugin-transform-runtime，还有使用corejs：3，也记得安装@babel/runtime-corejs3

现在我们可以编译了

请记得分号，尤其要注意，不然你可能报以下错误

2. node原生支持ESmodule

将.js的文件修改为.mjs， index文件导入core的方式改为import

运行方式为

node --experimental-modules bin/index.mjs
复制代码

运行成功！！！

node14以上的版本可以直接使用node bin/index.mjs