有一个 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 对于实现这一点的更有效方法有何想法?渴望能够基于环境变量编程地切换加载库的生产和调试版本。
openlayers$: 'openlayers/dist/ol-debug.js'
添加到不会破坏对ol.css的要求中。 - BartBiczBoży