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

Question

我正在使用 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 等）的其他导出所做的一切工作都很好，所以我确定我只是以错误的方式执行此导入过程.但是我在这里实际上做错了什么？

Answer 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 文件扩展名

Answer 2

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

这个

exports.image = new Circle({

会变成这样：

module.exports.image = new Circle({