在node项目中支持ES Module

最新推荐文章于 2025-02-27 20:33:43 发布

qq_14820093

最新推荐文章于 2025-02-27 20:33:43 发布

阅读量1.6k

点赞数 14

文章标签： node.js 前端 javascript

本文链接：https://blog.csdn.net/qq_14820093/article/details/135899973

版权

本文档介绍了在Node.js项目中支持ES模块的两种方法。首先，通过使用webpack进行构建，解决低版本Node对ES模块的兼容问题，涉及webpack配置、Babel转换等步骤。其次，介绍了直接利用Node原生支持ES模块的方法，包括修改文件扩展名和调整执行方式。最终成功实现了在不同环境下运行含有ES模块的Node项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、node环境

nodejs :16.18.1

二、使用npm 初始化一个简单的脚手架项目

1、创建一个项目目录 igly-test-esmodule

mkdir igly-test-esmodule

2、初始化igly-test-esmodule 项目

npm init

3、创建一个bin目录

4、在bin 目录下创建一个 index.js 文件

5、在package.json文件中添加一个bin的入口配置

6、在index.js 打印一句话测试

三、不支持 ES module 的现象复现

创建 utils.js 文件

module.exports = function() {
	console.log("hello utils");
}

在 bin/index.js 入口文件中引入 utils js 文件；

#! /usr/bin/env node

import utils from "./utils";
utils();

执行脚手架

igly-test-esmodule

报错

四、如何支持 ES module

4.1 方法1：使用webpack 模式；

第一阶段：使项目中 ES module 能构建成功

安装 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"
    },
}

创建 core.js

import utils from "./utils";
utils();

修改 index.js

#! /usr/bin/env node
require("./core.js")

在 package.json 中创建一个 scripts 的命令

{
// ...省略
  "scripts": {
    "build": "webpack",
    "dev": "webpack -w"
  },
// ...省略
}

最低0.47元/天解锁文章