admin管理员组文章数量:1320635
I am ing from a c++ background, so javascript isn't a familiar language. However, I think I've figured out the basics of ES6 module importing/exporting. I'm having a bit of trouble figuring out the exporting syntax in the popular library gl-matrix .js .
I can include gl-matrix.js
in my html file and it code works fine within my main.js script. However, I'm trying to use a linter (eslint) within vscode to help guide me in using proper javascript; eslint marks types like vec3
and mat4
as red because they're undefined. I've noticed my other modules are also marked red until I import them.
I've tried things like:
import {vec3} from 'gl-matrix.js';
and get the error Uncaught SyntaxError: The requested module 'gl-matrix.js' does not provide an export named 'vec3'
I've also tried import * as vl from 'gl-matrix.js';
and using vl.vec3, but no to luck either. It doesn't appear to me that gl-matrix.js is using the es6 module exporting, but I'm unsure. It is definitely using some export system.
Clicking the github link will take you to the entire gl-matrix.js for viewing, but here is some snippets of the type of exporting it is doing:
(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 patibility 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;
It then proceeds to define functions to use. As far as I can tell, WebPack is a way to pose many library js files into a single output file (gl-matrix.js in this case). Perhaps I'm wrong. This being the output file, it seems I should be about to import from it directly.
So really I have multiple questions. Is this some special syntax for ES6 modules? If so, how does one import it?
If it is not, how does one import properly? Is it likely eslint will be able to resolve the symbols and stop flagging them as undefined?
Any help on any of those questions is greatly appreciated.
I am ing from a c++ background, so javascript isn't a familiar language. However, I think I've figured out the basics of ES6 module importing/exporting. I'm having a bit of trouble figuring out the exporting syntax in the popular library gl-matrix https://github./toji/gl-matrix/blob/master/dist/gl-matrix.js .
I can include gl-matrix.js
in my html file and it code works fine within my main.js script. However, I'm trying to use a linter (eslint) within vscode to help guide me in using proper javascript; eslint marks types like vec3
and mat4
as red because they're undefined. I've noticed my other modules are also marked red until I import them.
I've tried things like:
import {vec3} from 'gl-matrix.js';
and get the error Uncaught SyntaxError: The requested module 'gl-matrix.js' does not provide an export named 'vec3'
I've also tried import * as vl from 'gl-matrix.js';
and using vl.vec3, but no to luck either. It doesn't appear to me that gl-matrix.js is using the es6 module exporting, but I'm unsure. It is definitely using some export system.
Clicking the github link will take you to the entire gl-matrix.js for viewing, but here is some snippets of the type of exporting it is doing:
(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 patibility 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;
It then proceeds to define functions to use. As far as I can tell, WebPack is a way to pose many library js files into a single output file (gl-matrix.js in this case). Perhaps I'm wrong. This being the output file, it seems I should be about to import from it directly.
So really I have multiple questions. Is this some special syntax for ES6 modules? If so, how does one import it?
If it is not, how does one import properly? Is it likely eslint will be able to resolve the symbols and stop flagging them as undefined?
Any help on any of those questions is greatly appreciated.
Share Improve this question edited Jun 23, 2019 at 2:00 user128511 asked Jun 22, 2019 at 14:11 Enigma22134Enigma22134 5306 silver badges12 bronze badges 1-
Please see this GitHub issue on how to include gl-matrix from browser using ES6 module syntax i.e.
import {vec2, vec3, mat4, quat} from "gl-matrix.mjs"
without the node.js business. – legends2k Commented Jan 17, 2020 at 6:11
2 Answers
Reset to default 6That code you linked to is not in a format to use with es6 modules, it's a UMD format file that predates browsers supporting the import
keyword. Browsers only started supporting import
natively in early 2019.
If you download the npm version (the built version vs the github version) then there is a file esm/index.js that looks like this
import * as glMatrix from "./mon.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 };
To use the es6 version you can do something like
download the source to gl-matrix and manually include them.
import * as vec3 from 'path/to/vec3.js';
download the source to gl-matrix, build, copy into your project and then
import vec3 from 'path/to/build/esm/index.js';
use npm and an npm aware build step like webpack or rollup
In that case the libraries are stored in a folder called
node_modules
in the root of your project and the various tools know how to look inside that folder and you include them by not putting path and using the name you used when adding the libraryimport vec3 from 'gl-matrix'
See https://webpack.js/guides/getting-started/
in that example they use a library called
lodash
and a variable that is a single underscore_
so changelodash
togl-matrix
and_
to a variable of your choice likeglMatrix
note: that page assumes you've installed node.js
I did the following:
- Downloaded the npm version by using npm mand in terminal.
- Copied the entire folder into my projects lib folder.
- Used import * as glMatrix from "../lib/gl-matrix/esm/index.js";
- Used the methods as this: glMatrix.mat4.create(); instead of mat4.create();
Thanks gman :)
本文标签: javascriptHow to properly import from glmatrixjsStack Overflow
版权声明:本文标题:javascript - How to properly import from gl-matrix.js? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742076223a2419426.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论