无需转译即可构建 React 组件库
无需转译即可构建 React 组件库
你好，我亲爱的朋友，我想你来这里是为了寻找一个简单问题的答案：“2022 年我还需要将我的组件转译为 es5 吗？”答案是——不。就是这样。感谢您的关注！
现代的 React 库是什么样的？在大多数项目中，人们通过 babel 和 Webpack/Rollup 转译 React 组件只是为了将它们提供到下一个级别——最终的前端项目，组件将被导入并再次转译一次。即使最终项目是一个带有自己的 Webpack 配置的 React Typescript 前端应用程序。该方案如下所示：
How it should not be
你不觉得这个过程有问题吗？ 当然！我们可以去掉转译组件的第一步。并直接在我们的项目中使用它们。 无需构建库即可将其放入 npm 包中。
(!) 当然，如果你想在一个对 React 或 TypeScript 一无所知的项目中使用你的组件库，或者直接在 HTML 文档中使用——你仍然需要转译步骤。
那么正确的方案应该是什么样子呢？这里是：
我们不应该转译库代码。我们不需要任何 babel、webpack 或其他配置。我们可以获取我们的源文件并将它们放入一个 npm 包中。
How it should be
听起来不错，对吧？但是，如果您使用的是“开箱即用”，它就不能“开箱即用” 反应创建应用程序 为您的最终项目。源文件有一个限制，即所有源文件都应该在 源代码 文件夹。
该项目的作者希望遵循“零配置”的原则，并实施了大量隐藏在引擎盖下的配置。如果您将使用“弹出”react-create-app ，您可以找到所有这些配置 npm 运行弹出 命令。
所以……扔掉 反应创建应用程序 .我们不需要它。关于什么 react-app-rewired 项目？情况更糟。该项目的作者说：
“从 Create React App 2.0 开始，这个 repo 主要由社区‘轻微’维护。” https://github.com/timarney/react-app-rewired#readme
或者换句话说：“伙计们，对不起，我不知道我为什么要创建这个项目，请停止使用它。”
我认为使用具有良好维护和明确未来路线图的本机 webpack 配置要好得多。可以将 react-create-app 用于教育，但请停止将其用于生产。
设置应该如何？
有几点很重要：
在图书馆项目中。
- 设置
主要的将库的 package.json 中的字段复制到正确的文件中。例如：“main”：“./index.ts”或“main”：“./src/index.ts”，如果您仍然有 src 文件夹。 - 确保您已在 package.json 中添加所需的依赖项。在我的示例中，只需要 2 个依赖项：
反应和反应域
在最终的前端应用项目中。
- 你的项目应该有一个常规的 webpack 配置。
- 通过 webpack 配置中的 babel 强制处理 node_modules。为此，只需删除该行：
排除：/（node_modules）/，来自 babel-loader 规则部分。
就这样。没有黑客，没有技巧，没有额外的配置。享受编码！
您可以在此 github 存储库中找到 Library 和 App 的示例： https://github.com/LEMing/medium-example-zero-config-library
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
