Question

所以我试图将捆绑包中的所有React组件暴露给浏览器的全局（window）。我正在使用webpack＆＃39; expose-loader这样做。

我在公开普通JS模块方面取得了巨大的成功，但是当我尝试公开JSX模块时，它给了我一个错误：

Module parse failed: ~/project/src/components/list.jsx Line 20: Unexpected token <
You may need an appropriate loader to handle this file type.
...

错误仅显示使用expose的第3个加载程序条目。如果删除了加载器条目，React组件就可以正常构建。

这是webpack配置文件：

module.exports = {
  entry: "./src/components/index.js",

  output: {
    filename: "bundle.js",
    path: __dirname + "/web"
  },

  module: {
    loaders: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loaders: ["babel-loader?presets[]=react,presets[]=es2015"],
      },
      {
        test: require.resolve("react"),
        loader: "expose?React"
      },
      {
        test: /list.jsx$/,
        loaders: ["babel-loader?presets[]=react,presets[]=es2015", "expose?List"]
      }
    ]
  }
};

我试图在babel-loader加载程序之前使用expose来尝试修复错误，但没有运气，同样的错误。有没有人在使用web pack之前在全球范围内公开React组件有任何成功。

Answer 1

好吧，所以我能算出来。正如@ arve0在评论中指出的那样，加载器应该是相反的顺序。所以这是正确的：

  {
    test: /list.jsx$/,
    loaders: ["expose?List" "babel-loader"]
  }

但是，至少在这种情况下，预设的顺序并不重要。

Answer 2

字符<表示jsx未转换。检查.babelrc，它应该在任何其他变换之前使用react预设。

使用Webpack公开React组件

2 个答案: