前言
在前端开发中，组件化的开发方式受到越来越多的关注，而 csf-convert 是一个可以将 .stories.js 文件内容自动转换为 Component Story Format (CSF) 格式的 npm 包。本文将介绍如何使用 csf-convert 进行组件开发。
安装
使用以下命令进行全局安装：
npm install -g csf-convert
使用
转换 .stories.js 文件
使用以下命令将 .stories.js 文件转换为 CSF 格式文件：
csf-convert /path/to/file.stories.js
csf-convert 会将原文件重命名为 .stories.js.bak，并生成一个新的 .stories.js 文件。新的文件会以 CSF 格式的写法重新渲染：
-- -------------------- ---- ------- ------ - ----- ----- - ---- ----------------------------- ------ ----- ---- -------- ------ -- -------------- -- ---- ----- -------------- ---- ------ ------- - ------ --- ----------- ---- ---------- -- -------------- --- --------- -- - -- ----- ----- --------- ----- - ------ -- --- -------------- -- --------- --- ------ ----- ------- - ------------------ ------------ - - -- ---- --
其中：
{{ COMPONENT_NAME }}会被替换成当前组件的名称{{ STORY_TITLE }}则需要手动填写，可根据实际情况进行修改
配合 Storybook 进行开发
csf-convert 生成的 .stories.js 文件可以直接与 Storybook 一起使用，实现组件开发的场景。例如，假设我们已经使用 csf-convert 转换过组件的 .stories.js 文件，可以在项目根目录下新建 .storybook 文件夹，然后在 .storybook 文件夹中新建 main.js 文件：
module.exports = {
stories: ['../src/**/*.stories.(js|mdx)'],
addons: [
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/addon-notes'
],
};其中：
stories接收一个数组，其中包含待展示的 story 文件路径，支持 glob 匹配addons则是 Storybook 的插件，可以根据实际情况进行添加和配置，本例使用了@storybook/addon-actions、@storybook/addon-links和@storybook/addon-notes
在根目录下新建 src 文件夹，然后在其中新建 .stories.js 文件，假设组件名称为 Button，则例子代码如下：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -- -------------- -- ---- ----- -------------- ---- ------ ------- - ------ --- ----------- ---- ---------- -- -------------- --- -- ----- -------- - ------ -- --- -------------- -- --------- --- ------ ----- ------- - ------------------ ------------ - - -- ---- -- ------ ----- --------- - ------------------ -------------- - - -- ---- --
其中，{{ COMPONENT_NAME }} 和 {{ STORY_TITLE }} 的含义与上方相同。
最后，在命令行中使用以下命令可以启动 Storybook：
npx start-storybook -p 6006
启动后可在浏览器中预览组件。
总结
使用 csf-convert 包可以让组件开发变得更加简单和高效，同时使用 Storybook 进行预览也可以加速组件开发和排错。在后续的开发过程中，我们可以根据实际情况进行二次开发和完善，也欢迎前端同学认真使用本文介绍的工具进行研究和实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aef81e8991b448d8960