Node.js中使用ES Module的两种方式
方式一使用webpack对源码进行构建,使用babel对js进行处理使其适应于低版本node依赖:一、package.json"devDependencies": {"@babel/core": "^7.12.10","@babel/plugin-transform-runtime": "^7.12.10","@babel/preset-env": "^7.12.11","@babel/runt
·
方式一
使用webpack对源码进行构建,使用babel对js进行处理使其适应于低版本node
依赖:
一、package.json
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/plugin-transform-runtime": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/runtime-corejs3": "^7.12.5",
"babel-loader": "^8.2.2",
"webpack": "^5.11.0",
"webpack-cli": "^4.3.0"
}
npm scripts
"scripts": {
"build": "webpack",
"dev": "webpack --watch"
},
二、webpack.config.js配置
const path = require('path');
module.exports = {
entry: './bin/core.js', // 入口文件
mode: 'development', // 开发模式,development => 开发模式 production =》 生产模式
output: { // 输出
path: path.join(__dirname, '/dist'), // 输出目录
filename: 'core.js' // 输出的文件名
},
target: 'node', // 默认web,因为需要使用到node原生模块,所以需要更改为node
module: {
rules: [{ // 配置babel-loader
test: /\.js$/, // 处理js
exclude: /(node_modules|dist)/, // 排除node_modules和dist目录
use: {
loader: 'babel-loader', // 使用babel对js进行低版本兼容处理
options: {
presets: ['@babel/preset-env'],
plugins: [
[
'@babel/plugin-transform-runtime',
{
'corejs': 3,
'regenerator': true,
"useESModules": true,
'helpers': true
}]
]
}
}
}]
}
}
方式二
通过Node原生支持ES Module
步骤一、 更改js文件后缀为.mjs
步骤二、 import js的时候,如import './core';不能省略后缀名,需要写成import './core.mjs';
执行:node --experimental-modules ./bin/index.mjs
步骤三、 由于是实验性质特性,所以需要配置开启 --experimental-modules,否则会报如下错误
internal/modules/cjs/loader.js:821
throw new ERR_REQUIRE_ESM(filename);
^
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/snail/Desktop/code/lego/imooc-test1-dev/imooc-test1/bin/index.mjs
at Object.Module._extensions..mjs (internal/modules/cjs/loader.js:821:9)
at Module.load (internal/modules/cjs/loader.js:643:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Function.Module.runMain (internal/modules/cjs/loader.js:839:10)
at internal/main/run_main_module.js:17:11
开启后会报一个警告,在node版本v14.x.x以后也支持该特性,不会显示警告信息
(node:59215) ExperimentalWarning: The ESM module loader is experimental.
更多推荐
已为社区贡献3条内容
所有评论(0)