Webpack / NPM：使用已安装模块的构建版本而不是从源代码重新构建

Question

我想将 dat.GUI 库用于使用 Webpack 2 构建的项目。如果我通过 npm -install --save-dev dat.gui 安装模块，然后尝试使用 import * as DAT from 'dat.gui'; 导入它，我当 Webpack 尝试编译我的项目时出现以下错误：

ERROR in ./~/dat.gui/src/dat/controllers/NumberControllerSlider.js
Module not found: Error: Can't resolve 'style' in 
'/home/me/myProject/node_modules/dat.gui/src/dat/controllers'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix 
when using loaders.

我知道在使用 Webpack 2 构建基于 Webpack 1 的项目时会发生此错误。但是，如果 node_modules/dat.gui/build'; 中已经有构建版本，为什么 Webpack 还要尝试构建模块？有没有办法告诉 Webpack 或 NPM 使用现有的构建版本而不尝试重新构建它？

Answer 1

导入节点模块时，webpack 会查看其 package.json 并使用 main field as entry of the module, similar to what Node.js does (webpack looks for more fields by default, see resolve.mainFields).

因为 dat.gui 的主字段不指向构建版本而是指向源，它实际上内联加载程序，如 dat.gui@0.6.1 - NumberControllerSlider.js 中所见 styleSheet 导入，并且总的来说这不是一个好主意，当然也不要发表。

但是您可以通过指定相应的路径来导入构建版本。所以你的进口将是：

import * as DAT from 'dat.gui/build/dat.gui.js';

如果您仍想只导入 dat.gui，您可以配置 resolve.alias 以指向构建版本，如下所示：

resolve: {
  alias: {
    'dat.gui': 'dat.gui/build/dat.gui.js'
  }
}

这样你就可以使用原来的导入语句了：

import * as DAT from 'dat.gui';

Webpack / NPM：使用已安装模块的构建版本而不是从源代码重新构建

Webpack / NPM: Use build version of installed module instead of re-building from source

javascript

node.js

npm

dat.gui

webpack