如何将 node.js 模块导入 node.js 模块

Posted 2023-03-08

【中文标题】如何将 node.js 模块导入 node.js 模块

【英文标题】：How to import a node.js module into a node.js module

【发布时间】：2021-08-21 09:09:12

【问题描述】：

我正在使用 webpack 将我的代码从一个大型浏览器 javascript 文件重构为一个更好的节点 JS 结构，我真的希望能够将 OpenLayers 节点模块导入我的节点脚本中。

我的 JS 文件和 package.json 存储在 /mymodule 中，我的项目的 node_modules 文件夹位于 /node_modules - 我有一个从 /node_modules/mymodule 设置到 /mymodule 的符号链接。我的 /mymodule/index.js 文件加载了一堆其他文件，我一直在将我的代码从我的原始浏览器 javascript 重构到其中。

这是我的 package.json：

  "name": "mymodule",
  "version": "1.0.0",
  "description": "Description goes here",
  "main": "index.js",
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1"
  ,
  "keywords": [],
  "author": "Me",
  "license": "ISC",
  "type": "module",
  "bundledDependencies": false,
  "dependencies": 
    "ol": "6.5.0"
  

这是我的 index.js：

const myConstants = require('./myConstants.js')
const myHelpers = require('./myHelpers.js')
const myStats = require('./myStats.js')
const myStyles = require('./myStyles.js')

module.exports = Object.assign(, myConstants, myHelpers, myStats, myStyles)

这就是我遇到问题的地方 - myStyles.js：

import  Style, Circle, Stroke, Fill, Text  from 'ol/style';

exports.image = new Circle(
  radius: 5,
  fill: null,
  stroke: new Stroke(
    color: 'red',
    width: 1,
  ),
);

我运行了npm install，然后创建了一个新的/mymodule/node_modules 文件夹，OpenLayers 安装在其中的/ol 文件夹中。有些事情告诉我这不是正确的做事方式，因为我希望我的模块只从现有的/node_modules/ol 安装中加载 OpenLayers，而不是进行新的/mymodule/node_modules/ol 安装。我希望在 package.json 中设置 "bundledDependencies": false 可以实现这一点，但我想不会。

npm run dev 继续并完成，没有任何错误，但随后在浏览器控制台中，我在这一行得到Uncaught ReferenceError: exports is not defined：

exports.image = new Circle(

...事实上，上面的那一行已经被 webpack 重写（我假设）如下：

exports.image = new __WEBPACK_IMPORTED_MODULE_0_ol_style__["a" /* Circle */](

到目前为止，我对其他 JS 文件（myConstants.js、myHelpers.js 等）的其他导出所做的一切工作都很好，所以我确定我只是以错误的方式执行此导入过程.但是我在这里实际上做错了什么？

【参考方案1】：

您的代码混合了 ESM 和 CommonJS，很遗憾您不能同时使用这两种方法，您必须使用其中一种。

您想使用 Export 关键字而不是 module.exports/exports

import  Style, Circle, Stroke, Fill, Text  from 'ol/style';

export const image = new Circle(
  radius: 5,
  fill: null,
  stroke: new Stroke(
    color: 'red',
    width: 1,
  ),
);

这将允许您import image from "filename"

注意 - 正如 Jackie 所说，这只适用于 node>=13.x

在节点 --experimental-modules 并使用 .mjs 文件扩展名

【讨论】：

还要确保您使用的是 --experimental-modules 标志并且文件具有扩展名 .mjs。

从 v13 开始，这实际上不再是实验性的了，也没有更多的标志了。

Lol ok sorry 自 12 年以来一直在使用，但仍应确保在扩展中表示模块系统（IE cjs、mjs 等）

所以我想第一个问题是他使用的是什么版本的节点。

我将修改我的答案以说明@Jackie

【参考方案2】：

您同时使用module.exports 和exports。由于exports是一个引用module.exports的变量，并且在浏览器中似乎不可用，所以使用module.exports而不是exports。

这个

exports.image = new Circle(

会变成这样：

module.exports.image = new Circle(

【讨论】：

ESM 模块可能不会分配module.exports，即CommonJS，这是ESModules。正确的语法是export OBJECT

@EthanSnow Webpack 支持 CommonJS 模块

正确，但是他使用的是 ESM Imports，如果使用的是 require 那么是的，他可以使用 module.exports。您不能将两者混合在一个文件中。

@EthanSnow 看他index.js 的第一行，他是require-ing myStyles.js 并没有导入它，所以功能应该暴露出来via module.exports.

我的立场是正确的，我不知道该功能，今天我学到了一些东西，谢谢。但是，留在文件的模块系统中仍然是一个好习惯。