使用 Webpack 暴露 React 组件答案

【问题标题】：Exposing React Components using Webpack使用 Webpack 暴露 React 组件
【发布时间】：2016-01-13 06:00:58
【问题描述】：

所以我试图将捆绑包中的所有 React 组件公开给浏览器的全局 (window)。我正在使用 webpack 的 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 的第三个加载程序条目显示。如果删除了该 loader 条目，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"]
      }
    ]
  }
};

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

【问题讨论】：

react 预设是否定义在 .babelrc 中？
@arve0 是的，es2015 和 reactpresets。
@arve0 预设的顺序如下：es2015，然后是react。
@arve0 同样的错误。顺便说一句，React 组件构建得很好，只有当我使用 expose 时才会出现错误。
让我们continue this discussion in chat.

标签： reactjs babeljs

【解决方案1】：

好的，所以我能够弄清楚。正如@arve0 在 cmets 中指出的那样，加载程序应该是相反的顺序。所以这是正确的：

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

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

【讨论】：

另外，最好将您的预设包含在 .babelrc 文件中，因为它们并不是真正与 webpack 相关的配置。
嘿@loganfsmyth，是的，我使用.babelrc。这里的内联预设只是为了代码的简洁。避免添加另一个代码sn-p。

【解决方案2】：

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

【讨论】：

切换顺序并首先创建react 无助于解决错误。 FWIW，没有expose 一切正常，只是不能使用expose。
装载机不应该倒序吗？ Sass 是 style!css!sass。