你可以使用 Webpack 将一个库中的库导入另一个库中的 Web 应用程序吗？答案

【问题标题】：Can you import a library from one repo into a web app in another repo using Webpack?你可以使用 Webpack 将一个库中的库导入另一个库中的 Web 应用程序吗？
【发布时间】：2017-08-22 03:03:46
【问题描述】：

所以我有一个包含 Vue.js 组件的库，并且我有一个 Vue Web 应用程序，它可以导入这些组件。两者都在 Webpack 上运行，并且都位于不同的存储库中。

在使用 webpack 之前，我使用了 browserify-hmr，并且可以使用 npm link 将库从我的 dev env 导入到 web pack。本质上，它与import '../../../library/index.js' 的作用相同

使用 Webpack，我收到如下错误：

ERROR  Failed to compile with 1 errors
1:16:18 PM

This dependency was not found:

* !!vue-style-loader!css-loader!../../../web-app/node_modules/vue-loader/lib/style-rewriter
?id=data-v-6afebbcb!sass-loader!../../../web-app/node_modules/vue-loader/lib/selector
?type=styles&index=0!./Component.vue in ../TheLibrary/src/Component.vue

To install it, you can run: npm install --save !!vue-style-loader!css-loader
!../../../web-app/node_modules/vue-loader/lib/style-rewriter?id=data-v-6afebbcb
!sass-loader!../../../web-app/node_modules/vue-loader/lib/selector?type=styles
&index=0!./Component.vue

我正在尝试在本地对库进行更改，并将其也导入到我的本地 Web 应用程序中，而无需推送库更改并从 Web 应用程序中提取模块更新。与 Webpack 有什么关系吗？

另外，webpack 项目是使用这个 https://github.com/vuejs-templates/webpack 构建的

更新

发生错误是因为该库有一个依赖项https://www.npmjs.com/package/susy，该依赖项未安装在 Web 应用程序上。一旦我在 Web 应用程序上安装了该依赖项，错误就会消失。

有什么想法吗？

【问题讨论】：

标签： javascript git npm webpack vue.js

【解决方案1】：

我认为在您的情况下，最好的方法是将您的常用功能移至 npm 包并将其用于两个 webpack 项目的依赖项中。这是正确的方法！

【讨论】：

其实库是常用的功能。它应该在两个单独的网络应用程序中使用。此外，请查看更新以获取更多信息。

【解决方案2】：

终于找到了解决办法。这一切都在 webpack 的解析器中。事情在 webpack v1 中工作，可能是因为它在 build/webpack.base.js 中有这一行

resolve: {
  fallback: [path.join(__dirname, '../node_modules')],
  ...

但是 webpack v2 似乎并没有以同样的方式工作。我的解决方法看起来像这样......

resolve: {
  modules: [
    path.join(__dirname, '../node_modules/TheLibrary'),
    ...

现在它在符号链接库中查找其依赖项。

注意：如果 TheLibrary 也有符号链接库，那么在此解决方法下，您还需要在根 Web 应用程序下包含它。像这样的...

resolve: {
  modules: [
    path.join(__dirname, '../node_modules/TheLibrary'),
    path.join(__dirname, '../node_modules/TheLibrary/node_modules/Component'),
    ...

所以仍然对更好的解决方案持开放态度:)

【讨论】：