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

Question

有一个 javascript 库，在 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

Webpack 具有用于将模块替换到不同路径的配置选项:https://webpack.github.io/docs/configuration.html#resolve-alias

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

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

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

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

我的构建系统基于 gulp starter .