使用 webpack 的更现代的fabric.js hello-world（2018年状态）

Question

我刚开始研究使用fabric.js，而且我发现很少有关于如何在我的网站上安装它的资源。我能找到的只是一个引用文件“all.min.js”的stack overflow question，在快速搜索解压缩文件时不再存在。

过去几个小时我在网上搜索过，看起来它应该是常识！我仍然被困住了。

我应该在HTML中链接哪个文件？

编辑：为了澄清，我从fabric.js的github上下载了一个大的ZIP文件。我对链接到哪个文件以包含库感到困惑。

Answer 1

您需要从HERE下载fabric.js并将其保存为名为fabric.js的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

Answer 2

Fabric采用非常传统的分布式布局。

您想使用dist目录中的文件。 fabric.js用于开发工作，fabric.min.js用于实时网站。

Answer 3

使用 webpack 的更现代的fabric.js hello-world（2018年状态）

这种方法的优点

fabric.js不需要进行版本控制
鉴于所有依赖项都位于package.json中，因此只需两个命令即可从头开始运行项目：git clone <url>和npm install
更新最新的结构版本就像运行npm update一样容易
不仅fabricjs代码，而且您自己的代码都将被压缩。
它为您提供了webpack提供的所有其他好处

假设

这是假设...

...您拥有NPM >= 5.2（如果我没记错的话，webpack需要这样做）。
...您有权访问CLI外壳以运行npm和webpack命令。
... npm二进制文件在您的路径上。默认情况下：$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是一个图形库，我假设只有在您要在fabricjs进程中运行nodejs时才需要这样做。浏览器已经能够渲染图形，因此在客户端代码中运行fabricjs时，这不是问题。否则，您可能需要安装所需的标头。我假设（未经测试）可以通过在基于debian的系统上安装软件包libcairo-dev来解决此错误。

代码

现在我们已经准备好进行编码了。

创建两个文件夹src和dist，因此我们的源树变为：

.
├── node_modules
|   ├...
|   └── ...
├── dist
├── package-lock.json
├── package.json
└── src

2 directories, 2 files

在index.html文件夹中创建具有以下内容的HTML文件dist：

<!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>

还有index.js文件夹中的JavaScript src，内容如下：

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，或从控制台运行小型Web服务器进行测试：

(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
```

如何设置Fabric.js？

3 个答案:

使用 webpack 的更现代的fabric.js hello-world（2018年状态）

这种方法的优点

假设

准备工作

代码

要知道