Pull Request 开源pr实战,过程详细,修改vite-plugin-cdn-import； cdn只导入css

Pull Request

这是git中提供的功能,网上优秀的解释很多，我就不锦上添花了，这里我们以实践场景诠释下，怎么有的pr, 经过搜集调查后发现常用在开源库中，比如vite-plugin-cdn-import;还有一些公司的库，为了保证良好的迭代，员工需要fork到自己的仓库，由boos审核是否同意pr,最终迭代产品; 我是一个前端实践者，在使用vite-plugin-cdn-import时发现不支持只导入css,就索性读了他们的源码，大胆的修改了一番，也达到了需求，只是这次实践属于我本人的第一次pr过程，没有全面认识该库的编码规范及社区动态，最终我成功提交了pr，也希望能得到认可或者指教;

fork远端项目

fork是分支的意思，是git上的一个功能，通过fork将远端项目分支到个人仓库

clone 自己仓库分支

在fork后我们的个人仓库里就有了远端库（开源库）

git clone 自己仓库地址

检查链接状态

git remote -v

添加远端链接

git remote add upstream 远端仓库地址

再次查看状态

git remote -v

创建分支

git branch 分支名

切换分支

git checkout 切换分支

编辑更改项

更改项就是我们创建并切换好分支后的目录，索性这个项目的代码不是很难看懂，我就给自己打气，最难迈出的是第一步，在历经一段时间的代码分析后我看懂了相关流程，该库在处理cdn最终引入的功能主要由pathList及cssList俩个数组数据决定，美中不足的是这里缺少了兼容性，比如你想引入一个库的css而不需要js,我就在此处声明了变量，并对代码进行了控制；修改完成后，在本地测试达到了我的预期效果，而后进行的这一套pr;
具体修改过程我这就不便展示了，就是你拥有了该库编程的基础知识，能把每一行的代码看懂，其实是和你写自己的代码一样，只不过是对元素的处理上，专业知识的认识上，编程风格上，条件控制上存在个性化，如果你能看懂如下代码：

const data = modules.map((m) => {
        let v: Module
        if (typeof m === 'function') {
            v = m(prodUrl)
        } else {
            v = m
        }
        const version = getModuleVersion(v.name)
        let pathList: string[] = []
        onlyCss = v.onlyCss ? true : false;
        if (!onlyCss) {
            
            if (!Array.isArray(v.path)) {
                pathList.push(v.path)
            } else {
                pathList = v.path
            }

            const data = {
                ...v,
                version
            }

            pathList = pathList.map(p => {
                if (!version && !isFullPath(p)) {
                    throw new Error(`modules: ${data.name} package.json file does not exist`)
                }
                return renderUrl(prodUrl, {
                    ...data,
                    path: p
                })
            })
        }

        const data = {
            ...v,
            version
        }

        let css = v.css || []
        if (!Array.isArray(css) && css) {
            css = [css]
        }

        const cssList = !Array.isArray(css) ? [] : css.map(c => renderUrl(prodUrl, {
            ...data,
            path: c
        }))

        return {
            ...v,
            version,
            pathList,
            cssList
        }
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

map函数和es6的一些语法概念，如果你能看懂，那么代表着你的想法也许会出现在其中；

添加本地更改

git add .
git commit -m 'fix/only-css'

推送分支到自己仓库

因为在之前操作中你的分支建立在本地，远程仓库还没有，执行如下语句推送并创建：
git push -u origin 分支名

对比并且pull request

成功后你便可在git中提交了，打开你自己fork的仓库，会有如下场景

这里的下面有你的变动对比

填写pr内容并确定

点击了compare & pull request 后，会弹出填写描述界面，把你想给负责人说的话写在里面

远端仓库查看pr

最后我们即可在远端查看到我们的pr等待质量及可行性审核，如果成功你将会是一位贡献者;

最后

开源的过程真的是走向未来的过程，通过阅读别人优秀的代码，不仅丰富了思想实践能力，也增强了我们对编码的热情；

📚git专栏

☃️ 个人简介：一个喜爱技术的人。

🌞 励志格言: 脚踏实地，虚心学习。

❗如果文章还可以，记得用你可爱的小手点赞👍关注✅，我会在第一时间回关、回访，欢迎进一步交流。