為什么“ npm install canvas”沒有創建JavaScript文件？

Question

我是節點軟件包的新手。 我嘗試使用以下方法將畫布安裝到我的項目中：

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或其他文件。 “發布”文件夾中的文件甚至都不是javascript。 我做錯了什么？ 我需要正確做些什么？

Answer 1

它不會生成.js文件，因為它使用.node文件，該文件是本機Node Addons的擴展名，Node.js會很好地加載它。

從Node.js-文件模塊 ：

如果未找到確切的文件名，則Node.js將嘗試使用添加的擴展名加載所需的文件名： .js ， .json ，最后是.node 。

Node非常喜歡.node文件，因此您可以導入它而無需顯式添加擴展名。

另一方面，Webpack默認情況下不查找.node 。 如resolve.extensions ，默認值為：

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

您可以在webpack配置中將其更改為：

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

由於Node加載的.node文件不同 ，您可能還需要node-loader才能使其在webpack中工作。

注意：本機節點插件在瀏覽器中不起作用，並且要使它們與webpack一起使用，您可能需要設置target: 'node' ，還可能需要通過定義webpack來推遲運行時間require作為外部 。