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

Posted 2023-02-22

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

【英文标题】：Distributing ReactJS components written in ES6 and usnig them inside ES5 source code

【发布时间】：2016-09-02 08:01:23

【问题描述】：

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

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

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

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

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

【问题讨论】：

这个问题很难回答，因为它需要写一篇完整的文章。相反，既然你已经开始了，如果你告诉我们你遇到了什么问题呢？

当我想使用用 ES6 完成的组件时，我必须依赖一个需要用 ES6 编写的脚本才能使用它。没有那个我想从已经完成的 ES6 代码中导出元素，转换它并在已经编写的 ES5 代码中使用它？当我使用 webpack 作为导出默认元素构建组件时，我无法通过 HTML 文件头中的典型 javascript 包含在 ES5 代码中使用该组件，该元素似乎在 DOM 中不可用？

【参考方案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');

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

【讨论】：

我遵循了完全相同的方法，但是我失败了，我应该像 "postal": "postal", "redux": "redux", "react-redux": "react -redux”在“browserify-global-shim”中，因为我也使用这些技术？

不，你不需要。你的错误是什么？您是否还在脚本标题中包含了 react 和 react Dom ？如果您不想从其他项目执行此操作，则需要从主入口点导出，例如：***.com/questions/33815617/…

我遇到了这样的错误***.com/questions/37092308/…

你用 browserfy-global-shim 设置你的包 JSON 了吗？

是的，我已经设置好了，“browserify-global-shim”：“react”：“React”，“react-dom”：“ReactDOM”