故事书.js。如何将组件编译为 ES5 lib

Posted 2023-02-19

【中文标题】故事书.js。如何将组件编译为 ES5 lib

【英文标题】：Storybook.js. How to compile components as a ES5 lib

【发布时间】：2020-08-06 18:49:46

【问题描述】：

我正在使用 Storybook 单独开发和测试我的组件。我使用 typescript、babel 等。 一切都像魅力一样。 现在我想将我的组件编译为 ES5 库 (commonJS) 并将其提供给我的其他外部项目。

基本上故事书构建命令将整个故事书作为静态网站，但我需要编译的组件库。

这里的主要问题是故事书在 node_modules 中有一些依赖关系，它们是 ES6 模块，所以 babel 配置为在 Typescript 处理我自己的组件时继续它们。 所以我不能只使用tsc 等来编译我的组件，例如components 文件夹，因为打字稿不会从node_modules 获取和编译依赖项。它们应该编译成 ES5，否则我的任何外部项目，需要使用已编译的故事书组件，将无法处理它们。

另外，webpack 有它自己的别名，所以在部署过程中应该使用整个 tools zoo。 在 Storybook 的情况下怎么做？ 我是否应该将 webpack 等手动安装到故事书中并配置与故事书分开的部署过程？ 我可以只使用故事书的 webpack 吗？ （因为我已经用 Babel 和 Typescript 配置了它）。

感谢您的帮助！

【参考方案1】：

这里的另一种方法 - 使用 babel-cli 并且仅将您的组件转换为一组文件

命令示例：

npx babel src -d lib/ --copy-files

Babel CLI 的链接：https://babeljs.io/docs/en/babel-cli AFAIK，配置可以包括打字稿插件