webpack/vue/nuxt-如果文件存在，则映射导入(覆盖)

Question

在我当前的项目中，我正在尝试实现以下内容：

让我们假设以下文件结构：

/src/
/src/components/MyComponent.vue
/src/overwrites/components/MyComponent.vue

(在任何*.vue文件中(：import MyComponent from '@/components/MyComponent.vue'.

如果相同的文件存在于并行的现有目录"中；覆盖"；，导入它，而不是从/src/components/导入它。

为了从热重新加载等中受益，我想通过webpack解决这个问题。

然而，我还没有弄清楚如何扩展vue加载程序或在它前面。

Answer 1

您可以使用require.context为不涉及webpack或vue-loader的组件爬网目录。

例如，你有一个结构：

.src
+-- components
|   +-- MyComponent.vue
+-- overwrites
|  +-- components
|  |   +-- MyComponent.vue

您将把index.js文件放在每个components文件夹中，内容为：

const requireModule = require.context('./', false, /.vue$/)
requireModule.keys().forEach(fileName => {
if (fileName === './index.js') return;
const moduleName = pascalCase(
fileName.replace(/(./|.vue)/g, '')
);
components[moduleName] = requireModule(fileName)
});
export default components;

然后，您将能够在根组件文件中导入这些index.js文件，如：

import components from './components/index.js';
export default {
components: components,
// ...
}

它将从components目录加载所有vue文件。它将解决热重新加载的问题。

不过，您将不得不自己管理重复组件的加载，可能使用Object.assing之类的：

import components from './components/index.js';
import {components as overwrites} from './overwrites/components/index.js';
export default {
components: Object.assign({}, components, overwrites),
// ...
}

重复的部件将被替换。

Answer 2

我用自定义的webpack解析器解决了这个问题。与此类似：https://github.com/hollandThomas/webpack-custom-resolver/blob/master/StyleResolverPlugin.js

然而，我检查"；。vue"；而不是"；。js"；然后我用路径代替文件名。