Question

我的团队最近开始将我们的网站移至vue.js。总体而言，一切进展顺利，但是在不同网站之间共享常见的javascript文件和vue组件时遇到了问题。不久前，我发布了a question的内容，我们决定将所有共享文件保存在单独的存储库中，并使用git子模块将文件插入项目中。由于种种原因，我们希望摆脱这种情况，而我的项目经理已要求我研究替代方案，但我确实很努力。

我们要做的是将所有文件包含在项目旁边，并在需要时将其导入。因此文件布局将为

Project
├── ourSharedStuff
│   ├── usefulFunctions.js
│   └── coolwidget.vue
├── website1
│   └── package.json
└── website2
    └── package.json

然后我们认为只需要导入所需的文件

import { somefunction } from '../ourSharedStuff/usefulFunctions';
import { coolWidget } from '../ourSharedStuff/coolwidget.vue';

但是，由于导入来自项目外部，因此在尝试解析来自共享项目的任何内容的依赖关系时（例如，coolwidget.vue需要momentjs时），似乎会使webpack感到困惑。这个问题导致我们首先使用子模块。

因为这似乎引起了问题，所以我想：“啊，也许要从那里解析对共享项目的依赖关系，它应该在package.json中声明自己的依赖关系”。因此，我尝试将package.json添加到共享项目中，并使用npm install ../ourSharedStuff/将其包含在项目中。但这也没有真正起作用，而且我仍然遇到类似的问题，因为当您使用npm安装这样的文件位置时，它只是创建了一个符号链接，并且webpack似乎仍然感到困惑。

经过一番谷歌搜索后发现，如果您使用npm安装tarball，它将正常运行并在node_modules中创建实际文件。除一个问题外，该方法非常有效...共享项目中的文件是用es6编写的，需要进行编译。因为像几乎每个人一样，我们将node_modules排除在通过Babel之外：

test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
    presets: ['@babel/preset-env'],
    plugins: [
        '@babel/transform-runtime',
    ]
}

因此，接下来我想到了“嗯，排除项只是一个正则表达式，我将其更改为排除除我们以外的所有文件夹”。所以我将其更改为：/node_modules\/(?!ourSharedStuff)/

当我尝试构建时，webpack开始发出深奥的消息

./ node_modules / core-js / modules / _is-object.js中的警告4：9-16 “在'@ babel / runtime / helpers / typeof'中找不到导出'默认'（导入为'_typeof'）

我完全不知道如何实现应该相当容易的事情。因此，毕竟我的问题是：共享用es6编写并且可能具有自身外部依赖关系，在多个项目之间共享的.js和.vue文件的最佳方法是什么，以便在您使用时进行必要的转换。建立那些项目？

如何为Webpack打包共享的.js和.vue文件

0 个答案: