如何以编程方式将模块导入节点 js 的本地范围？答案

【问题标题】：How to programmatical import module to local scope of nodejs?如何以编程方式将模块导入节点 js 的本地范围？
【发布时间】：2020-07-24 07:24:14
【问题描述】：

代码环境是浏览器。捆绑工具是 webpack。我有一个 router.js 文件，例如：

import foo from './views/foo.vue'
import bar from './views/bar.vue'
import zoo from './views/zoo.vue'

//use foo, bar, zoo variables

我在views 文件夹下有很多像这样导入的“.vue”文件。是否有一种编程方式可以将所有[name].vue 自动导入为局部变量[name]？所以当我在views中添加或删除一个vue文件时，我不需要手动编辑router.js文件。这个好像有点脏。

for (let name of ['foo', 'bar', 'zoo']) {
    global[name] = require(`./views/${name}.vue`)
}

【问题讨论】：

不适用于import - 因为import 是在编译时处理的，而不是在运行时处理的，您无法编写任何代码来影响它。但是由于require 只是一个常规函数，您可以编写代码来控制它，就像您发布的那样。它一点也不脏。由于require 是一个常规函数，因此将其视为常规函数并在循环中调用它是完全可以的

标签： javascript node.js vue.js

【解决方案1】：

不，就是这样。您可以选择动态导入和自动化，或显式编码和类型检查/检查。

不幸的是，这是其中之一。唯一的另一种方法是元编程，您可以在其中编写代码来编写代码。

所以你在这样的循环中生成导入语句，并将字符串写入源文件，并在源文件中使用分隔注释块来识别和更新它。

【讨论】：

【解决方案2】：

以下内容适用于 webpack 和 vue。我实际上将它用于 vuex 和命名空间。希望对你也有帮助。

// imports all .vue files from the views folder (first parameter is the path to your views)
const requireModule = require.context('./views', false, /\.vue$/);

// create empty modules object
const modules = {};

// travers through your imports
requireModule.keys().forEach(item => {

  // replace extension with nothing
  const moduleName = item.replace(/(\.\/|\.vue)/g, '');
  
  // add item to modules object
  modules[moduleName] = requireModule(item).default;
});

//export modules object
export default modules;

【讨论】：

谢谢。虽然不是直接的答案，但我应用了你的方法。