通过 npm/webpack 加载预构建模块的调试版本

Question

有一个 javascript 库，我希望开发它 with/debug，它是预构建的并且可以在 npm 上使用。就我而言，它是 openlayers.

在需要 javascript 文件并想要调试的经典方式中，只需将脚本 url 从生产版本切换到调试版本，即：

到

但是，当使用 webpack 然后通过 npm 导入时：

import openlayers from 'openlayers'

获取库的生产分发，与上面的 ol.js 脚本相同。

附带说明一下，要阻止 webpack 尝试解析预构建库并发出警告，您必须包含如下内容：

// Squash OL whinging
webpackConfig.module.noParse = [
  /\/dist\/ol.*\.js/,  // openlayers is pre-built
]

回到手头的问题：我如何有条件地为这样预构建和导入的模块加载不同的入口点？

当然，我可以用 hacky 的方式来做。通过进入 node_modules/openlayers/package.json 并将浏览器字段从

切换

  "browser": "dist/ol.js",

到

 "browser": "dist/ol-debug.js",

有没有一种方法可以通过 webpack 或使用不同的导入语法请求不同的入口点？根据规范，我是否首先必须请求库维护者更新浏览器字段以允许对浏览器的不同入口点提示？ https://github.com/defunctzombie/package-browser-field-spec

有没有更有效的方法来实现这一目标？渴望能够基于环境变量以编程方式切换库的生产版本和调试版本的加载。

Answer 1

这解决了 openlayers 导入以使用调试版本：

webpackConfig.resolve.alias: {
  openlayers: 'openlayers/dist/ol-debug.js'
}

在我的构建系统中，我有一个函数接受环境类型和 returns 匹配的 webpackConfig。根据参数，我是否包含上面的代码片段。完整代码：webpack-multi-config.js

我有两个不同的 (gulp-) 开发和生产任务。比如生产任务：webpackProduction.js
Line 1 导入类型为 production 的配置脚本。

我的构建系统基于 gulp starter。

Load debug version of pre-built module via npm/webpack