在传统 HTML/CSS/JS 环境中使用 ES6 导入构建 React？

Question

我有一个很大的旧网站，我正在向其中添加 React 组件。它主要使用 node/express 和车把模板。基本上我是这样做的：

站点以旧方式导入 React 库（在 html 文件中）：

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

然后我这样使用它：

HTML:

<div id="react-container"></div>
<script src="react-component.jsx" type="text/babel"></script>

反应-component.jsx:

const Component = ()=>{ ... }

const container = document.getElementById("react-container");
ReactDOM.render(React.createElement(Component), container);

问题是如果我想导入库，它们必须可以通过脚本标签从 CDN 获得。我现在发现了一些不是的，而且如果能够在文件顶部看到我正在导入的内容而不是仅仅让一堆库在 window 对象上浮动，那就太好了.

无论如何，我不能使用 create-react-app，但我想知道如何在我的系统中插入一个小的构建步骤，以便 npm/yarn 安装库然后导入他们进入我的代码。

谢谢。

Answer 1

我不熟悉您使用的技术，但我认为您的问题很有趣，因此我进行了一些研究。

这是我会尝试做的事情：

由于您使用的是节点，因此您可以使用 Webpack 将每个 React 组件捆绑在其自己的单独文件中 (https://webpack.js.org/concepts/output/#multiple-entry-points) and tell Webpack to put the generated files in a folder that can be served by express. (https://expressjs.com/en/starter/static-files.html)。 Webpack 将负责捆绑您可能使用 npm 安装的所有依赖项。您只需要通过导出组件将组件公开给 window，这样它就可以在步骤 2 中访问。
然后您可以使用 <script> 在特定模板中加载您需要的组件包，然后使用 ReactDOM.render(React.createElement(YourComponent), document.getElementById('the-container')).
渲染它

如果你对Webpack不熟悉可以看看这篇文章：https://www.valentinog.com/blog/webpack/#how-to-set-up-react-webpack-5-and-babel-from-scratch

我没有测试这个所以我不确定它是否有效但正如我所说我认为这是一个有趣的问题并且我想让它试一试，也许会给你一些有用的想法。

在传统 HTML/CSS/JS 环境中使用 ES6 导入构建 React？

Building React with ES6 imports in traditional HTML/CSS/JS environment?

javascript

reactjs

es6-modules