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

Question

我想在使用Webpack 2构建的项目中使用dat.GUI库。 如果我通过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使用现有的构建版本而不尝试重新构建它？

- lsgng

Answer 1

当导入一个Node模块时，Webpack 会查找其 package.json 文件并使用该模块的 main 字段 作为模块的入口，类似于 Node.js 的行为（Webpack会默认查找更多字段，请参见resolve.mainFields）。

由于对于 dat.gui 来说，main 字段并没有指向构建后的版本，而是源代码，它在实际中内联加载程序，如 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';

- Michael Jungo