Question

在我的网站上，我不想捆绑，而是直接使用ES6模块（适用于受众）

我尝试通过以下方式导入fabric.js

import {fabric} from "../node_modules/fabric/dist/fabric.js";就像我捆扎时一样（对于捆扎来说很好用。）

但是当我启动网站时

“未捕获的SyntaxError：所请求的模块 '../node_modules/fabric/dist/fabric.js'不提供导出名为“面料””

如果我将以上内容更改为 import * as FAB from "../node_modules/fabric/dist/fabric.js"; 我得到

未捕获的TypeError：无法读取未定义的属性“ fabric” 在fabric.js：3224

关于如何将结构直接用作ES6模块而不进行捆绑的任何想法？不用说，使用Chrome 76.0.3809.132时导入的其他模块没有这个问题

升级到结构3.4，无济于事。让我将我的整个代码粘贴到此处：html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <script type="module" src="./start.js"></script>
   </head>

   <body>

   </body>
</html>

和我删除了其他所有内容的JS

import fabric from '../node_modules/fabric/dist/fabric.min.js';

仍然存在错误

未捕获的SyntaxError：所请求的模块 '../node_modules/fabric/dist/fabric.min.js'不提供导出名为“默认”

Answer 1

请尝试按如下所示导入它，

import fabric from '../node_modules/fabric/dist/fabric.min.js'


class App extends Component {

  render() {
    console.log(fabric) // you can get fabric object
    return (
      <div class="blahblah"> 
      </div>
    )

  }
}

Answer 2

fabric.js的编写方式，不适用于ES6模块导入。这是因为结构依赖this作为浏览器环境中对window的引用，例如当它使用IIFE将属性添加到fabric对象时，如下所示：

(function(global) {

  var fabric  = global.fabric || (global.fabric = { }),

  // ...
  fabric.something = somethingElse
})(typeof exports !== 'undefined' ? exports : this);

通常，this将作为对window的引用而传递，但是当脚本作为模块加载时（除其他地方，MDN mentions it here）不会传递。

这就是即使您通过正确导入

的原因

import fabric from '../node_modules/fabric/dist/fabric.js'

您会收到类似的错误

Uncaught TypeError: Cannot read property 'fabric' of undefined

除非您想动手并修补库源代码，否则最好将结构加载到一个单独的非模块脚本标签中。

Answer 3

以这种方式导入对我有用

 import { fabric } from "fabric"

在Chrome中将Fabric js作为ES6导入无法正常工作

3 个答案: