我刚开始研究使用 fabric.js，但我发现关于如何在我的站点中安装它的资源非常少。我只能找到一个引用文件“all.min.js”的stack overflow question，在快速搜索解压缩文件后，该文件不再存在。
在过去的几个小时里，我已经在互联网上搜索了，它看起来应该是常识！我仍然被困住了。
我应该在我的 HTML 中链接到哪个文件？
编辑：澄清一下，我从 fabric.js 的 github 下载了一个大的 ZIP 文件。我对应该链接到哪个文件以包含库感到困惑。
【问题讨论】：
标签： html canvas javascript fabricjs
fabric.js 不需要提交版本控制package.json 中，只需两个命令即可从头开始运行您的项目：git clone <url> 和 npm install
npm update 一样简单
这假设...
>= 5.2（如果我没记错的话，这是 webpack 需要的）。npm 和 webpack 命令。$HOME/.local/bin 在 *nix 系统上注意：如果您已有npm 可用，您将不需要对系统的超级用户/root 访问权限。
首先，初始化一个新的npm项目：
mkdir my-fabric-project
cd my-fabric-project
npm init -y
然后将 webpack 安装到该文件夹中（我们稍后会用到）：
npm install webpack webpack-cli --save-dev
另外，安装fabricjs，因为这是我们项目的依赖项：
npm install --save fabric
上面的两个 npm install 命令将填充我们的 package.json 文件，其中包含生产 (fabricjs) 和开发 (webpack & webpack-cli) 依赖项。
注意：在安装 webpack 时，我在撰写本文时收到了有关 cairo 的错误。但似乎它们是无害的。 cairo 是一个图形库，我认为仅当您想在 nodejs 进程中运行 fabricjs 时才需要它。浏览器已经能够渲染图形，所以在客户端代码中运行fabricjs 时，这不是问题。否则，您可能需要安装所需的标头。我假设（未经测试）这个错误可以通过在基于 debian 的系统上安装包 libcairo-dev 来解决。
现在我们已经准备好开始编码了。
创建两个文件夹src和dist，这样我们的源码树就变成了：
.
├── node_modules
| ├...
| └── ...
├── dist
├── package-lock.json
├── package.json
└── src
2 directories, 2 files
在dist 文件夹内创建一个HTML 文件index.html，其内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World FabricJS</title>
</head>
<body>
<canvas
id="myCanvas"
width="400"
height="400"
style="border:1px solid #000000;">
</canvas>
<script src="main.js"></script>
</body>
</html>
还有一个位于src 文件夹中的javascript index.js，内容如下：
import {fabric} from 'fabric';
function run() {
let canvas = new fabric.Canvas('myCanvas');
let rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
canvas.add(rect);
}
run();
这将为我们提供以下目录结构：
.
├── node_modules
| ├...
| └── ...
├── dist
│ └── index.html
├── package-lock.json
├── package.json
└── src
└── index.js
2 directories, 5 files
您可能会注意到dist/index.html 引用了一个名为main.js 的文件，该文件不存在。我们需要运行webpack 来创建它：
npx webpack
您的代码现在应该可以工作了。要么手动打开dist/index.html，要么从控制台运行一个迷你网络服务器进行测试：
(cd dist && python3 -m http.server)
就是这样！
这应该可以帮助您开始您的项目，还可以让您利用 webpack 的强大功能轻松拆分代码。祝你好运，玩得开心！
dist/main.js 和 src/index.js 是在没有配置的情况下运行 webpack 时的默认文件名webpack 默认会在dist/main.js 中创建缩小代码。这是因为它默认以“生产”模式运行。要更改此设置，请创建一个名为 webpack.config.js 的文件，其内容如下：
module.exports = {
mode: 'development'
};
你可以使用它运行：
npx webpack --config webpack.config.js
【讨论】：
您只需从HERE 下载fabric.js 并将其保存为名为@987654323@ 的js 文件，并创建html 文件假设index.html 具有以下内容。
要运行此示例，fabric.js 和 index.html 应位于一个文件夹中。
<html>
<head>
<script src="fabric.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="450" style="border:1px solid #000000"></canvas>
<script>
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.selectionColor = 'rgba(0,255,0,0.3)';
canvas.selectionBorderColor = 'red';
canvas.selectionLineWidth = 5;
</script>
</body>
</html>
选项
您可以从HERE下载任何格式的fabric.js
【讨论】：
Fabric 遵循非常传统的分布布局。
您想使用dist 目录中的文件。 fabric.js 用于开发工作，fabric.min.js 用于实时站点。
【讨论】：