分发用 ES6 编写的 ReactJS 组件并在 ES5 源代码中使用它们

Question

我已经做了一个带有 Redux store 的 ReactJS 组件，使用 react-redux 将两个组件绑定在一起。

我使用 ES6 和 webpack 编写了这段代码，当我单独运行组件并通过 ES6 导入在其自身的代码中对其进行测试时，代码工作正常。

但是我想将组件作为可重用的 html 元素分发，以便在我们组织的其他项目中使用，所以我得到了 webpack 构建并通过使用 angular 指令绑定组件在 angularjs 项目中使用它。但后来我遇到了很多问题，组件没有按预期工作。

我已经在stack overflow question这里发布了一个关于这个问题的单独帖子

我想知道的是分发使用 ES6 和捆绑的 webpack 或其他捆绑机制编写的可重用反应组件的方法，并在 ES5 源代码中使用该组件。请帮助我一些资源、指南或指针，如果可能。

Answer 1

如果我理解正确 - 你想要对 ReactJS 组件项目做的是有一个将 ES6 编译为 ES5 的构建过程。

您可能已经在使用 babel，您可能只需要另一个构建步骤来确保 babel 输出位于某个目录中，例如，您可以在 package.json 中有一个构建步骤，例如：

"build": "babel src -d build" 

src 是你的 es6 源代码，build 是输出的 es5 目录。

然后，如果您想使用生成的 javascript 以便它可以在脚本标签内的其他项目中使用，您可以为此使用 browserfy（如果需要，您可以将其添加到构建脚本中）。 例如：

browserify ./lib/somelib.js 
-o ./build/MyReactComponent.js 
--transform browserify-global-shim 
--standalone MyReactComponent

browserify-global-shim 需要将 require('react') 和 require('react-dom') 替换为对全局变量的引用，您需要：

"browserify-global-shim": {
  "react": "React",
  "react-dom": "ReactDOM"
}

在您的 package.json 中以使其正常工作。 它本质上将内部要求转换为：

var _react = (window.React);
var _reactDom = (window.ReactDOM);

您甚至可以使用babelify 一步完成上述操作（虽然我从未尝试过，所以我不能保证它会起作用）

如果您想require (commonjs) 中的组件用于基于节点的项目，则不需要 browserify 步骤，您可以执行以下操作：

var MyReactComponent = require('..pathtoreactlib');

来自另一个项目。 不同的代码库可能有额外的步骤 - 但这需要更多关于公司项目的信息