通过npm/webpack加载预编译模块的调试版本

Question

通过npm/webpack加载预编译模块的调试版本

npmwebpackopenlayers-3

7

有一个 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
]

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

当然，我可以用一种笨拙的方法来做。通过进入node_modules/openlayers/package.json并将浏览器字段从...切换到...

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

到

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

有没有一种方法可以通过webpack或使用不同的导入语法来请求不同的入口点？我是否需要首先请求库维护者更新浏览器字段，以根据规范允许浏览器使用不同的入口点提示？https://github.com/defunctzombie/package-browser-field-spec 对于实现这一点的更有效方法有何想法？渴望能够基于环境变量编程地切换加载库的生产和调试版本。

- Underwater_developer

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- aAXEe · Accepted Answer

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 第1行导入具有“production”类型的配置脚本。

我的构建系统基于gulp starter。