前端学习：从零开始做一个前端开源项目

Renascence.409

已于 2024-08-07 14:06:23 修改

阅读量1.1k

点赞数 37

分类专栏：前端学习文章标签：学习前端 github npm 开源

于 2024-08-07 14:01:49 首次发布

本文链接：https://blog.csdn.net/qq_63898506/article/details/140926793

版权

前端学习专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1、开源包含的内容

源码。
文档。如二次开发文档和用户使用文档
开发环境。告诉二次开发者如何搭建和运行代码
允许他人贡献代码。而不是仅仅给别人阅读源码的权限
问题。用户提问，维护者答复，问题共享
问题列表和升级计划。记录当前问题，以及何时解决、何时升级

2、注册账号

根据自己的需求决定注册的账号是基于组织的还是项目的。

注册账号需要分别去github和npm注册以XXX为用户名的账号。

3、创建项目

注册完成后点击【+】进行创建New repository，操作如下图。

在Repository name栏目填写项目名称。如出现绿色✔则说明项目名称可

在Description栏目填写针对项目的一个描述，以展现项目特点。

选择Public即可。README file是创建项目后的一个开发文档，可以勾选。license选择MIT License（开放协议）即可。之后就可以创建项目了。注意：这里Add .gitignore这里应该选择Node，不然到时候创建没有.gitignore文件。

接下来就可以通过链接去访问项目了。

例如：Renascence33/fast-cache: 短小精悍的前端缓存工具，防止内存“侧漏" (github.com)

4、clone项目

首先要在Setting里添加ssh key。

ssh key是链接我的电脑和GitHub服务器的一把钥匙，只有添加成功了才能把我本地的代码提交到GitHub服务器里。

添加成功后我们就可以到项目页面用SSH来clone项目。

复制链接后，进入Git Bash命令窗口，输入克隆命令

git clone git@github.com:Renascence33/fast-cache.git

下载完毕，进入代码目录，运行如下命令修改当前git的用户名和邮箱，改成和当前GitHub用户名和注册邮箱一致。

cd fast-cache
git config user.name 'Renascence33'
git config user.emal 'fast-cache@github.com'

最后，随便修改一下README.md文件的内容，然后提交，看能否成功？成功了就说明添加的ssh key生效了。

git add .
git commit -m "first update"
git push origin main
git status可以查看README是否修改，git diff可以查看修改的内容

push成功后可以在主页看到推送后的内容。

5、搭建开发环境

初始化一个环境，命令行运行npm init，然后按照提示初始化即可，最后通过ll命令来检验是否生成了package.json文件。

npm init

5.1 规范一级目录

项目的一级目录要提前规范好。用mkdir命令创建文件夹。

src -- 源代码
release -- 发布结果
test -- 单元测试用例
doc --文档
example -- 示例

5.2 创建工具并运行程序

安装插件。

npm i babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest webpack webpack-cli --save-dev

安装完之后创建.babelrc文件和webpack.config.js文件。

.babelrc文件内容如图：

webpack.config.js文件内容如图：

最后，修改 package.json中的scripts，增加“release":"webpack”。

然后命令行运行 npm run release，就可生成release 的内容。

但是在这一步中，我出现了错误，一定要注意版本问题，否则会报错！！！

接下来可以创建一个test.html测试一下是否成功了。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>fast-cache test</p>
    <script src="../release/bundle.js"></script>
</body>
</html>