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

Question

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

我的 JS 文件和 package.json 存储在 /mymodule，我项目的 node_modules 文件夹在 /node_modules - 我有一个符号链接设置为 /mymodule 来自 /node_modules/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,
  }),
});

I 运行 npm install，然后创建了一个新的 /mymodule/node_modules 文件夹，其中的 /ol 文件夹中安装了 OpenLayers。有些事情告诉我这不是正确的做事方式，因为我希望我的模块只从现有的 /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 关键字而不是模块。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

在节点 <12 中，您必须添加标志 --experimental-modules 并使用 .mjs 文件扩展名

Answer 2

您正在使用 module.exports 和 exports。由于 exports 是引用 module.exports 的变量，而且它似乎在浏览器中不可用，因此使用 module.exports 而不是 exports。

这个

exports.image = new Circle({

会变成这样：

module.exports.image = new Circle({

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

How to import a node.js module into a node.js module

javascript

node.js

node-modules

webpack