开发自己的组件包流程

大阪黑鸡
291 阅读4分钟

黑鸡前一段时间在工作中接触到了客户公司的一个项目，每个人开发自己的组件，然后将组件打包zip压缩包后上传，项目页面自动发生更新，当时从这个项目上获取到了一些开发组件的思路，而又赶巧的在当时看见了零一大佬的一篇《手把手带你10分钟手撸一个简易的Markdown编辑器》文章，然后从中也获取到了一些设计思路，然后秉承着一切的学习都是从模仿开始的理念，自己也开始开发了一个markdown编辑器的组件，github仓库在这里。

编辑器

当然了，目前也只是实现了基本功能，但是黑鸡感觉就目前的使用体验来说也并不算太好，接下来的话黑鸡也是想研究研究其他编辑器组件的一些源码，看看如何将一个编辑器组件做的更加完善，在早期的时候黑鸡一直都停留在应用层面，最近也是随着接触的项目难度提升，也感受到了知识储备上的不足，也是要放低姿态时刻学习才行。在这里也分享一些开发组件的心得。

环境的搭建

开发组件我们首先需要需要有一个开发环境，我们先创建两个空的文件夹，一个用于调试，另一个用来写我们的组件

|- my-react-library //用于开发我们的组件
|- my-react-project //用于调试的项目

首先我们先搭建my-react-library文件夹下面的架构。

搭建my-react-library

  1. 初始化项目并安装依赖
yarn init -y

yarn add rollup rollup-plugin-babel @babel/core @babel/preset-env @babel/preset-react -D

这里使用rollup对项目进行打包，当然使用webpack也没问题

  1. 添加配置文件

在第一步安装依赖之后，我们需要创建配置文件rollup.config.js以及.babelrc，此时的目录结构如下

|- my-react-library //用于开发我们的组件
    |- node_modules
    |- .babelrc // babel配置
    |- rollup.config.js //rollup配置文件
    |- package.json
|- my-react-project //用于调试的项目

然后我们再创建一个src文件夹用来写我们组件相关的代码

|- my-react-library //用于开发我们的组件
    |- node_modules
    |- src
        |- index.js //入口文件
    |- .babelrc // babel配置
    |- rollup.config.js //rollup配置文件
    |- package.json
|- my-react-project //用于调试的项目

完成之后开始在配置文件中写入配置项

// rollup.config.js
import babel from 'rollup-plugin-babel'

export default {
    input: './src/index.js',
    output: {
        file: 'lib/index.js',
        format: 'esm'
    },
    plugins:[
        babel()
    ],
    external: ['react']
}

// .babelrc
{
     "presets": ["@babel/preset-env", "@babel/preset-react"]
}

然后我们在package.json中定义一下脚本命令，并重新定义一下入口

// package.json
{
    "main": "lib/index.js",
    ...
    "scripts": {
        "build": "yarn run rollup -c",
        "start": "yarn run rollup -c -w"
    }
    ...
}

然后我们在入口文件中先随便写点代码

// src/index.js
export default {
    name: "dabanheiji"
}

然后我们在my-react-library目录的终端上运行下面命令

yarn link my-react-library

ok，my-react-library文件夹的环境搭建先到这里，然后我们开始搭建my-react-project

搭建调试项目my-react-project

调试项目特别简单，我们先将终端切换到根目录下，然后执行下面命令创建一个空项目，这里黑鸡使用了vite更新快，体验比较好一些

yarn create @vitejs/app my-react-project --template react

目录结构

|- my-react-library //用于开发我们的组件
    |- node_modules
    |- src
        |- index.js //入口文件
    |- .babelrc // babel配置
    |- rollup.config.js //rollup配置文件
    |- package.json
|- my-react-project //用于调试的项目
    |- node_modules
    |- src
    |- .gitignore
    |- index.html
    |- package.json
    |- vite.config.js

然后cd到my-react-project文件夹下执行下面命令

yarn link my-react-library

执行之后就可以在当前项目中引入我们的组件项目了，就可以进行调试了，我们在my-react-project目录的终端下执行yarn dev启动项目

然后修改src/App.jsx中的代码

// src/App.jsx
import React from 'react'
import obj from 'my-react-library'

const App = ()=>{
    return (
        <div>
            { obj.name }
        </div>
    )
}

export default App

然后我们就看到页面上的内容变成了dabanheiji这个字符串，我们就可以在开发组件的时候查看组件的视图并调试功能了

组件开发

在执行完上面的操作之后，开发环境就正式的搭建好了，然后下一步就可以开始组件的开发了，我们回到my-react-library文件夹下添加组件文件夹

|- my-react-library //用于开发我们的组件
    |- node_modules
    |- src
        |- button
            |- index.jsx
        |- index.js //入口文件
    |- .babelrc // babel配置
    |- rollup.config.js //rollup配置文件
    |- package.json

// src/button/index.jsx
import React from 'react'

const Button = (props)=>{
    return (
        <button
            onClick={props.onClick}
        >
            <span>{ props.children }</span>
        </button>
    )
}

在终端输入yarn start保证包会时刻更新

然后回到my-react-project中修改一下App.jsx中的内容

// my-react-project/src/App.jsx
import React from 'react'
import Button from 'my-react-library'

const App = ()=>{
    return (
        <div>
            <Button
                onClick={()=>{
                    console.log(110)
                }}
            >按钮</Button>
        </div>
    )
}

export default App

然后页面上内容就变成了一个按钮了，接下来就是按照自己的思路去开发自己的组件了。如果是需要使用typescript或者其他技术的话需要去下载对应的rollup插件并添加在配置项中。在开发完成之后发布npm其他人就可以使用你的组件了。

avatar
文章
阅读
粉丝