javascript - 网页包/NPM : Use build version of installed module instead of re-building from source

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

导入 Node 模块时，webpack 会查看其 package.json 并使用 main field作为模块的入口，类似于 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';