javascript - 如何从 gl-matrix.js 正确导入？

我来自 c++ 背景，所以 javascript 不是一种熟悉的语言。但是，我想我已经弄清楚了 ES6 模块导入/导出的基础知识。我在找出流行库 gl-matrix https://github.com/toji/gl-matrix/blob/master/dist/gl-matrix.js 中的导出语法时遇到了一些麻烦。

我可以在我的 html 文件中包含 gl-matrix.js 并且它的代码在我的 main.js 脚本中工作正常。但是，我正在尝试在 vscode 中使用 linter (eslint) 来帮助指导我使用正确的 javascript； eslint 将 vec3 和 mat4 等类型标记为红色，因为它们是未定义的。我注意到我的其他模块也被标记为红色，直到我导入它们。

我试过这样的事情:import {vec3} from 'gl-matrix.js';并得到错误 Uncaught SyntaxError: The requested module 'gl-matrix.js' does not provide an export named 'vec3'
我也尝试过 import * as vl from 'gl-matrix.js'; 并使用 vl.vec3，但也没有运气。在我看来 gl-matrix.js 没有使用 es6 模块导出，但我不确定。它肯定使用了一些导出系统。

单击 github 链接将带您到整个 gl-matrix.js 进行查看，但这里有一些它正在执行的导出类型的片段:

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    else if(typeof define === 'function' && define.amd)
        define([], factory);
    else {
        var a = factory();
        for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
    }
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/
/******/
/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // define getter function for harmony exports
/******/    __webpack_require__.d = function(exports, name, getter) {
/******/        if(!__webpack_require__.o(exports, name)) {
/******/            Object.defineProperty(exports, name, {
/******/                configurable: false,
/******/                enumerable: true,
/******/                get: getter
/******/            });
/******/        }
/******/    };
/******/
/******/    // getDefaultExport function for compatibility with non-harmony modules
/******/    __webpack_require__.n = function(module) {
/******/        var getter = module && module.__esModule ?
/******/            function getDefault() { return module['default']; } :
/******/            function getModuleExports() { return module; };
/******/        __webpack_require__.d(getter, 'a', getter);
/******/        return getter;
/******/    };
/******/
/******/    // Object.prototype.hasOwnProperty.call
/******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/
/******/    // Load entry module and return exports
/******/    return __webpack_require__(__webpack_require__.s = 4);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.setMatrixArrayType = setMatrixArrayType;
exports.toRadian = toRadian;
exports.equals = equals;

然后继续定义要使用的函数。据我所知，WebPack 是一种将许多库 js 文件组合成单个输出文件(在本例中为 gl-matrix.js)的方法。也许我错了。这是输出文件，看来我应该直接从中导入。

所以我真的有很多问题。这是 ES6 模块的一些特殊语法吗？如果是这样，如何导入它？

如果不是，如何正确导入？ eslint 是否可能能够解析符号并停止将它们标记为未定义？

非常感谢对任何这些问题的任何帮助。

最佳答案

您链接到的代码不是与 es6 模块一起使用的格式，它是一个 UMD format 文件，早于支持 import 关键字的浏览器。浏览器在 2019 年初才开始原生支持 import。

如果您下载 npm 版本(内置版本与 github 版本)，那么有一个文件 esm/index.js 看起来像这样

import * as glMatrix from "./common.js";
import * as mat2 from "./mat2.js";
import * as mat2d from "./mat2d.js";
import * as mat3 from "./mat3.js";
import * as mat4 from "./mat4.js";
import * as quat from "./quat.js";
import * as quat2 from "./quat2.js";
import * as vec2 from "./vec2.js";
import * as vec3 from "./vec3.js";
import * as vec4 from "./vec4.js";
export { glMatrix, mat2, mat2d, mat3, mat4, quat, quat2, vec2, vec3, vec4 };

要使用 es6 版本，您可以执行以下操作

将源下载到 gl-matrix 并手动包含它们。

import * as vec3 from 'path/to/vec3.js';

下载源代码到 gl-matrix，构建，复制到你的项目中，然后

import vec3 from 'path/to/build/esm/index.js';

使用 npm 和 npm 感知构建步骤，如 webpack 或 rollup

在这种情况下，库存储在项目根目录中名为 node_modules 的文件夹中，各种工具知道如何查看该文件夹内部，您可以通过不放置路径并使用添加库时使用的名称来包含它们

import vec3 from 'gl-matrix'

见 https://webpack.js.org/guides/getting-started/

在那个例子中，他们使用了一个名为 lodash 的库和一个变量
是单个下划线 _ 所以将 lodash 更改为 gl-matrix 并将 _ 更改为
您选择的变量，如 glMatrix
注意:该页面假定您已安装 node.js

关于javascript - 如何从 gl-matrix.js 正确导入？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56716154/