目录
方案一：
通过 webpack 完成 ES Module 资源构建
通过 webpack target 属性支持 Node 内置库
webpack loader 配置 babel-loader 支持低版本 Node
方案二：
通过Node原生支持ES Module
Node 支持 ES Module 的两种方法 总结文章来源：https://www.toymoban.com/news/detail-460787.html
方案一：
通过 webpack 完成 ES Module 资源构建
npm install -D webpack webpack-cli根目录下创建 webpack.config.js文章来源地址https://www.toymoban.com/news/detail-460787.html
// 编辑 webpack.config.js
const path = require('path');
module.exports = {
entry: './bin/core.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'core.js',
},
mode: 'development'
}// 修改 package.json 中的命令
"scripts": {
"build": "webpack",
"dev": "webpack -w"
},// bin/index.js 文件内容
#!/usr/bin/env node
require('../dist/core')通过 webpack target 属性支持 Node 内置库
module.exports = {
entry: './bin/core.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'core.js',
},
mode: 'development',
target: 'node' // 增加
}webpack loader 配置 babel-loader 支持低版本 Node
npm install -D babel-loader @babel/core @babel/preset-envmodule.exports = {
......
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [ '@babel/preset-env' ],
plugins: [
[
'@babel/plugin-transform-runtime', // 转译async await
{
corejs: 3, // corejs版本
regenerator: true,
useESModules: true,
helpers: true,
},
],
],
},
},
},
],
},
};npm install -D @babel/plugin-transform-runtimenpm install -D @babel/runtime-corejs3方案二：
通过Node原生支持ES Module
// 文件名 index.mjs
// 文件内容 import './core.mjs'/* node8 以后支持实验功能 */
node --experimental-modules bin/index.mjs
/* node14 以后正式支持 */
node bin/index.mjsNode 支持 ES Module 的两种方法 总结
到了这里，关于前端架构师-week3-Node项目如何支持ES Module的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
