使用 vue 分布式文件中定义的函数

Question

我一直在使用 vuejs，一切看起来都还不错，但最近我决定检查 vue npm 包的 dist 文件夹内的分布式文件 vue.js 中的 vue 文件。

我的问题是我怎样才能直接在我看到的功能的项目示例中使用任何功能

// vue.js inside dist folder of the npm vue package
/**
   * Merge an Array of Objects into a single Object.
   */
  function toObject (arr) {
    var res = {};
    for (var i = 0; i < arr.length; i++) {
      if (arr[i]) {
        extend(res, arr[i]);
      }
    }
    return res
  }

如果可能的话，我想在我的项目中直接使用这些函数作为辅助函数。

Answer 1

除非函数是exported，否则不能通过导入使用该函数。

在尝试导入之前，您需要了解捆绑解析规则并检查它是什么类型的文件：

// ES Module
export function toObject(arr) { /* */ }

// Common.js Module
module.exports.toObject = function toObject(arr) { /* */ }

// Global/UMD
window.toObject = function toObject(arr) { /* */ }

通常，模块捆绑器会找出模块的类型，并允许您在代码中使用 import 语句，例如：

import { toObject } from 'vue';

像 Webpack 这样的模块捆绑器使用包的package.json 文件中的main 或module 字段来确定要使用的实际文件。因此，如果您的 dist 文件夹包含多个文件，则捆绑器会确切知道要提取哪个文件。

另外，如果您想从main 或module 字段中未指定的文件导入，则可以使用包相对路径。例如，您的dist 文件夹有两个文件：-vue.js 和helper.js 并且main 字段设置为dist/vue.js，然后只说import * as x from 'vue' 将始终从dist/vue.js 文件导入。

但是，如果您需要从 helper.js 文件导入，请使用类似：

import * as x from 'vue/dist/helper.js';
import { something } from 'vue/dist/helper.js';

同样，只有在该文件导出给定函数或值时才能导入（使用任何模块/commonjs/global 导出）。在您的情况下，正如我们从代码中看到的那样，该函数并未导出到外部，因此您无法导入它并在您的代码中使用它。

作为一种解决方法，您可以简单地复制代码并在您的应用程序中使用它。