故事书.js。如何将组件编译成ES5库?

问题描述 投票:0回答:1

我正在使用Storybook来开发&测试我的组件隔离。我使用typecript,babel等。一切都很顺利。现在我想把我的组件编译成ES5库(commonJS)并提供给我的其他外部项目。

基本上storybook build命令可以把整个storybook做成一个静态网站,但是我需要编译后的组件库。

这里的主要问题是storybook在node_modules中有一些依赖性,这些依赖性是ES6模块,所以babel配置为处理它们,而Typescript处理我自己的组件。所以我不能只用 tsc 等来编译我的组件,例如 components 文件夹,因为typescript不会从node_modules中获取和编译依赖关系,它们应该被编译成ES5,否则,我的任何需要使用编译后的storybook组件的外部项目,都无法处理它们。它们应该被编译到ES5,否则,我的任何外部项目,需要使用编译后的storybook组件,将无法处理它们。

另外,webpack有自己的别名,所以在部署的时候,应该使用整个工具库。在Storybook的情况下,怎么做?要不要把webpack等手动安装到storybook中,然后配置一个与storybook分离的deploy进程? 可以直接使用故事书的webpack吗?因为我已经用Babel和Typescript配置好了)。

谢谢你的帮助

reactjs typescript webpack babel storybook
1个回答
0
投票

另一种方法--使用babel-cli,只将你的组件转置为一组文件。

命令的例子。

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

巴别尔CLI的链接: https:/babeljs.iodocsenbabel-cli。AFAIK,配置中可以包含typecript插件。

© www.soinside.com 2019 - 2024. All rights reserved.