javascript - 为什么 'npm install canvas'没有创建javascript文件？

Question

我是 Node 包的新手。我尝试使用以下方法将 Canvas 安装到我的项目中:

npm install canvas

在我可以让它工作之前，我需要按照此处的说明安装 gtk 和 cairo:https://github.com/Automattic/node-canvas/issues/619

按照上述说明进行操作后，npm install canvas 没有生成任何错误，这是完整的输出(我没有看到任何错误):

canvas@1.6.5 install 
C:\Users\user\Desktop\latest\myproject\node_modules\canvas
> node-gyp rebuild

C:\Users\user\Desktop\latest\myproject\node_modules\canvas>if not
defined npm_config_node_gyp (node
"C:\Users\user\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js"
rebuild )  else (node "" rebuild )  Building the projects in this
solution one at a time. To enable parallel build, please add the "/m"
switch.   Canvas.cc   CanvasGradient.cc   CanvasPattern.cc  
CanvasRenderingContext2d.cc ..\src\CanvasRenderingContext2d.cc(801):
warning C4458: declaration of 'constructor' hides class member
[C:\Users\user\Desktop\latest\myproject\node_modules\canvas\build\canvas.vcxproj]
c:\users\user\desktop\latest\myproject\node_modules\canvas\src\CanvasRenderingContext2d.h(72):
note: see declaration of 'Context2d::constructor' (compiling source
file ..\src\CanvasRenderingContext2d.cc) ..\src\Canvas.cc(154):
warning C4457: declaration of 'data' hides function parameter
[C:\Users\user\Desktop\latest\myproject\node_modules\canvas\build\canvas.vcxproj]
..\src\Canvas.cc(150): note: see declaration of 'data'   color.cc  
Image.cc   ImageData.cc   init.cc   win_delay_load_hook.cc
     Creating library C:\Users\user\Desktop\latest\myproject\node_modules\canvas\build\Release\canvas.lib
and object
C:\Users\user\Desktop\latest\myproject\node_modules\canvas\build\Release\canvas.exp
Generating code   Finished generating code   canvas.vcxproj ->
C:\Users\user\Desktop\latest\myproject\node_modules\canvas\build\Release\\canvas.node
canvas.vcxproj ->
C:\Users\user\Desktop\latest\myproject\node_modules\canvas\build\Release\canvas.pdb
(Full PDB)   Copying C:/GTK/bin/libcairo-2.dll to
C:\Users\user\Desktop\latest\myproject\node_modules\canvas\build\Release\\libcairo-2.dll
          1 file(s) copied.   Copying C:/GTK/bin/libfontconfig-1.dll to
C:\Users\user\Desktop\latest\myproject\node_modules\canvas\build\Release\\libfontconfig-1.dll
          1 file(s) copied.   Copying C:/GTK/bin/libexpat-1.dll to C:\Users\user\Desktop\latest\myproject\node_modules\canvas\build\Release\\libexpat-1.dll
          1 file(s) copied.   Copying C:/GTK/bin/libfreetype-6.dll to C:\Users\user\Desktop\latest\myproject\node_modules\canvas\build\Release\\libfreetype-6.dll
          1 file(s) copied.   Copying C:/GTK/bin/libpng14-14.dll to C:\Users\user\Desktop\latest\myproject\node_modules\canvas\build\Release\\libpng14-14.dll
          1 file(s) copied.   Copying C:/GTK/bin/zlib1.dll to C:\Users\user\Desktop\latest\myproject\node_modules\canvas\build\Release\\zlib1.dll
          1 file(s) copied.   win_delay_load_hook.cc   Generating code   Finished generating code   canvas-postbuild.vcxproj ->
C:\Users\user\Desktop\latest\myproject\node_modules\canvas\build\Release\\canvas-postbuild.node
canvas-postbuild.vcxproj ->
C:\Users\user\Desktop\latest\myproject\node_modules\canvas\build\Release\canvas-postbuild.pdb
(Full PDB) myproject@0.1.15 C:\Users\user\Desktop\latest\myproject `--
canvas@1.6.5

我没有看到任何错误，但是当我执行 npm start 时，我看到:

ERROR in ./~/canvas/lib/bindings.js Module not found: Error: Can't
resolve '../build/Release/canvas' in     
'C:\Users\me\myapp\node_modules\canvas\lib' @
./~/canvas/lib/bindings.js 3:17-51 @ ./~/canvas/lib/canvas.js @
./app/app.js @ ./app/components/base/base.spec.js

我查看了 bindings.js 文件，唯一的代码是:

module.exports = require('../build/Release/canvas');

我导航到 ../build/Release/canvas 文件夹，找到 5 个名为 canvas 且具有不同扩展名的文件:

canvas.exp
canvas.lib
canvas.map
canvas.node
canvas.pdb

但是没有canvas.js或其他文件。 “Release”文件夹中的文件甚至都不是 javascript。我做错了什么？我需要做什么？

Answer 1

它不会生成 .js 文件，因为它使用 .node 文件，这是用于 native Node Addons 的扩展名，Node.js 将加载就这样就好了。

来自Node.js - File Modules :

If the exact filename is not found, then Node.js will attempt to load the required filename with the added extensions: .js, .json, and finally .node.

Node 对 .node 文件非常满意，因此您可以直接导入它，而无需显式添加扩展名。

另一方面，Webpack 默认情况下不会查找 .node。如resolve.extensions所示，默认为:

extensions: [".js", ".json"]

您可以在 webpack 配置中将其更改为:

resolve: {
  extensions: [".js", ".json", "node"]
}

如.node files are loaded differently by Node ，您可能还需要 node-loader使其在 webpack 中工作。

注意:Native Node Addons 无法在浏览器中工作，为了让它们与 webpack 一起工作，您可能需要设置 target: 'node'您可能还需要通过将 require 定义为 external 来告诉 webpack 将其推迟到运行时.