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

Question

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

我的问题是我如何能够直接在我的项目中使用任何函数，我看到的函数示例是

// 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

Unless the function is exported, you cannot use that function via import.

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

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

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

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

通常，模块 bundler 会找出模块的类型，并允许您在代码中使用 import 语句，如下所示:

import { toObject } from 'vue';

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

此外，如果您想从 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';

同样，仅当该文件导出给定函数或值时才可以导入(使用 module/commonjs/global 中的任何导出)。在您的情况下，正如我们从代码中看到的那样，该函数没有导出到外部，因此您无法导入它并在代码中使用它。

作为解决方法，您只需复制代码并在应用程序中使用它即可。