如何在 webpack 中同时使用 ES6 加载器和 brfs 转换?

Posted

技术标签:

【中文标题】如何在 webpack 中同时使用 ES6 加载器和 brfs 转换?【英文标题】:How do I use both the ES6 loader and the brfs transform in webpack? 【发布时间】:2016-06-15 12:49:37 【问题描述】:

我有一个用 ES6 编写的大型 webpack 生成的 ui,我想添加一个 npm 模块,它使用名为 lumenize 的 fs.readFileSync()。该软件包通常使用 browserify 构建。我在配置 webpack 以从 ES6 代码内部使用 bfrs 时遇到问题。

我试过这个配置:

loaders: [
  "transform?brfs",
  "babel-loader"
],

并颠倒了顺序,但都不起作用。

我曾想过尝试导入包的浏览器版本,但浏览器版本为 require() 公开了一个全局 polyfill,以便直接在浏览器中使用。我知道这对 webpack 来说是一个禁忌。真的吗?我可以分叉该项目并删除该全局暴露,但我们将不胜感激有关该配置的帮助。

【问题讨论】:

【参考方案1】:

尝试将transform 放入postLoaders 部分,如transform-loader 自述文件中所述:

postLoaders: [
  
    loader: "transform?brfs"
  
],
loaders: [
  
    test: /\.js$/,
    loader: "babel"
  
]

【讨论】:

感谢您的建议。仍然没有喜悦。事实证明 readFileSync 调用不在依赖项中。它在依赖的依赖中。所以,我想知道这是否搞砸了。我创建了一种解决方法,方法是分叉该依赖项并删除我不需要的部分(至少现在是这样)。碰巧这就是 readFileSync 调用所在的位置。所以,我现在很好。 您是否设置了任何exclude 选项?也许只是没有为该文件执行转换。此外,您可能会遇到该问题:github.com/webpack/transform-loader/issues/6

以上是关于如何在 webpack 中同时使用 ES6 加载器和 brfs 转换?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 ES6 中编译 webpack?

反应,流星,webpack,es6。如何创建加载/启动屏幕

Webpack加载器摆脱es6 / 7中的括号

React 16 - ES6 - Webpack - 错误:模块不是加载器(必须具有正常或俯仰功能)

Webpack结合ES6

如何优化 webpack/es6 开销?