Question

我来自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是否有可能能够解析符号并停止将其标记为undefined？

对于任何这些问题的任何帮助，我们将不胜感激。

Answer 1

您链接到的代码并非采用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或汇总

在这种情况下，库存储在项目根目录下的node_modules文件夹中，并且各种工具都知道如何查看该文件夹，并且通过不放置路径和使用您使用的名称来包含它们添加库时
```
import vec3 from 'gl-matrix'
```
请参见https://webpack.js.org/guides/getting-started/

在该示例中，他们使用名为lodash的库和一个是单个下划线_，因此将lodash更改为gl-matrix，将_更改为您选择的变量，例如glMatrix

注意：该页面假定您已经安装了node.js

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

1 个答案: