Webpack Fabric external 正在解析為 undefined

Question

我正在使用幾個 js 庫設置一個項目（打字稿、webpack），在 webpack 中配置為外部。 它們不應該是包的一部分，而是由 html 中的腳本標簽提供。

但是當試圖在我的課堂上使用它們時，它們解析為未定義。

在 webpack 中配置為外部的 Fabric 解析為 undefined

嘗試將結構 js 庫設置為 (typescript + webpack) 項目中的外部時發生錯誤。 Fabric 不應捆綁在輸出文件中，因為它是消費者提供的責任（例如，通過瀏覽器腳本標簽）。

注意：jQuery 最初有一個問題（作為外部），但現在已解決，並按預期工作。 另一方面，織物沒有。

fabric 已配置為外部，因此它不會包含在 webpack 包中。

就是這樣...

1. 在 webpack.config.js 中作為外部添加

...
  externals: {
    jquery: 'jQuery',
    fabric: 'fabric',
  },
...

2. 安裝了兩個庫的聲明文件

npm install @types/jquery -D
npm install @types/fabric -D

3. 在 public 文件夾和 index.html 中添加了庫（因為它們不能是應用程序包的一部分）

  <script src="js/lib/jquery.min.js"></script>
  <script src="js/lib/fabric.min.js"></script>

4. 創建了一個類App.ts，導入並實現了這兩個庫的實例。 （見 App.ts）

import { fabric } from "fabric";
import $ from 'jquery';

結構在類 App.ts 中解析為 undefined 並出現錯誤：

TypeError: Cannot read property 'Canvas' of undefined

---

請不要推薦 ProvidePlugin 或安裝 Babel。

更多關於 webpack“externals”： https ://webpack.js.org/configuration/externals/

---

更新 #1

jQuery 現在作為一個外部庫工作。 我沒有在外部設置中引用實際的 jquery 全局“jQuery”。 我有“JQuery”（大寫 J）。 現在已經解決了，jquery 正在工作。 謝謝@Aluan

另一方面，面料似乎完全是一個不同的問題。

Answer 1

您要查找的內容稱為shimming 。 Webpack 文檔在這里廣泛涵蓋了這一點： https ://webpack.js.org/guides/shimming/

編輯以添加示例：

在你的webpack.config.js plugins數組中：

    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]

編輯：我拉下你的代碼並讓它工作。 以下是步驟：

1. ts-loader阻塞在墊片上，所以使用 babel 的@babel/preset-typescript —— 否則你需要找到一種方法來告訴 ts 編譯器忽略它們。 這將使您開始：

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-typescript core-js@3

2. 在您的根目錄中，創建一個名為.babelrc的文件並添加以下內容：

{
    "presets": [
        "@babel/preset-typescript",
      [
        "@babel/env",
        {
          "targets": {
            "edge": "17",
            "firefox": "60",
            "chrome": "67",
            "safari": "11.1"
          },
          "useBuiltIns": "usage",
          "corejs": "3"
        }
      ]
    ]
  }

3. 將此添加到您的webpack.config.js ：

  plugins: [
    new ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      fabric: "fabric"
    })
  ]

4. 同時更新ts-loader ，將其更改為babel-loader 。

5. 現在在您的代碼中，您需要使用window前綴您的墊片庫：

    constructor(private readonly selector: string, canvasHeight: number, canvasWidth: number) {
      
      window.$(`#${selector}`).replaceWith(`<canvas id="${selector}" height=${canvasHeight} width=${canvasWidth}> </canvas>`);

      this.canvas = new window.fabric.Canvas(`${selector}`, { selection: false });

    }

Answer 2

原來，面料的問題出在面料本身！ Fabric 解析為 undefined（當在 webpack 上配置為外部時）的原因與 Fabric 公開其庫以供使用的方式有關。 這是他們需要解決的問題。

我在官方的fabric github頁面上添加了一個問題

但是我們有一個快速的解決方案。 只需像這樣使用 CommonJS 導入：

const fabric = require('fabric');

現在它起作用了！