Question

几天以来，我一直在尝试构建一个将由React应用程序使用的节点模块。

今天，我的模块打包为与 webpack 打包在一起的大型javascript文件。该节点模块的某些部分是可选的，只有在我们要使用某些功能（通过配置激活）时才需要。为了避免加载不必要的代码部分，我首先尝试使用 webpack 所述的 chunking 和动态导入，但这还没有工作：创建块并将其打包在dist/文件夹中，但是当从react应用程序调用时，我从未成功在node模块中运行动态导入。应用程序抱怨无法从应用程序加载块。这对我来说很有意义，因为此Webpack功能更多地用于动态加载应用程序的一部分，而不是作为节点模块依赖项按需加载代码的内部机制（但我可能是错的）。

我查看了其他项目，例如 babel 或 react-router ，其中使用 lerna 和 yarn将模块分为多个软件包包。因此，我尝试使用 lerna 和其他软件包来构建库：

my-library
  core/
    src/
      index.js
  another-package/
    src/
      index.js

我希望index.js中的core文件仅在需要且仅当节点模块index.js被调用时才从another-package调用@my-library/another-package中的方法。已安装。但是我从来没有找到解决方案。是否可以通过ES5 / ES6的{{1}} / webpack来实现，还是我采用了错误的方法？

更新10月27日

因此，经过几次测试，我能够将Aram解决方案与纯HTML / JS（https://github.com/PixelDuck/lerna-webpack/blob/main/a-react-app/src/client/test.html）结合使用，但是该解决方案无法与带有webpack https://github.com/PixelDuck/lerna-webpack/blob/main/a-react-app/src/client/App.js的react app包一起使用。

代码可在此处找到：https://github.com/PixelDuck/lerna-webpack。

打开一个到lerna的终端并运行 my-lerna-library yarn install，这将为每个包创建符号链接 `yarn dev'，这将创建捆绑包并听更改

然后在文件夹yarn link:all中打开一个新终端： a-react-app yarn install yarn link "my-lerna-library" `arn dev``

将在yarn link "@my-lerna-library/another-package"上打开一个页面，您会看到找不到模块http://0.0.0.0:3000。

如果您打开@my-lerna-library/another-package plainJS测试，一切都会很好。

问题似乎出在React应用程序的Webpack一侧，因为调试应用程序时，我可以看到核心程序包正在寻找一个库名http://0.0.0.0:5000/test.html，而不是Webpack在加载时使用的库名另一个软件包my_lerna_library__WEBPACK_IMPORTED_MODULE_3__

_my_lerna_library_another_package__WEBPACK_IMPORTED_MODULE_2___default

Answer 1

在您的my-lerna-library>程序包中：-

（1）将另一包package.json文件替换为此代码

{
  "name": "@my-lerna-library/another-package",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "dev": "webpack --watch --devtool inline-source-map --mode development",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "@my-lerna-library/core": "1.0.0"
  }
}

和

（2）核心package.json文件替换为此代码

{
  "name": "@my-lerna-library/core",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "dev": "webpack --watch --devtool inline-source-map --mode development",
    "build": "webpack --mode production"
  }
}

和my-lerna-library package.json文件替换了这样的工作区，

"workspaces": {
    "packages": [
      "packages/**"
    ]
},

然后运行命令“ yarn run dev”。我认为这对您来说是有用的！

Answer 2

最后，我能够实现我想要的。此处的代码：https://github.com/PixelDuck/lerna-webpack

因此，我们的想法是将另一个程序包的webpack配置设置为输出库为“ global”，并在核心程序包上，使用以下方法查看此全局变量

function isMyLernaLibraryAnotherPackageDefined() {
  return typeof myLernaLibraryAnotherPackage !== 'undefined';
}

testFromAnotherPackage() {
  if (isMyLernaLibraryAnotherPackageDefined())
    return new myLernaLibraryAnotherPackage.AnotherClass().test();
}

现在在React应用程序上，如果我正在导入import '@my-lerna-library/another-package';，则会显示消息和svg。如果我在此行发表评论，则找不到模块，什么也不显示

Answer 3

如果您需要一个具有可选依赖项的软件包，则可以创建一个 core软件包以及几个 feature软件包（它们是 not （甚至在peerDependencies中列出）。您可以在optionalDependencies中明确列出这些功能包。

此外，还应对核心软件包进行设计，以使其不必使用功能部件包，但如果已安装功能部件包，则可以正确使用它们。例如https://stackoverflow.com/a/50841764/14451484。

如何使用一些可选模块构建多包节点模块

3 个答案: