前端开源项目开始准备

最新推荐文章于 2024-09-19 15:27:52 发布

王小扣

最新推荐文章于 2024-09-19 15:27:52 发布

阅读量1.1k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_29150765/article/details/81300624

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

GitHub环境搭建

确定是 `组织` 还是`项目`

组织：Facebook是一个组织账户，下面有许多项目。账号名称为组织账号。官网名称为：facebook.github.io/react
项目：专门针对一个产品，这个账号下面就一个主产品，其它产品都是它的产品等分支。账号名称使用项目名称即可。官网名称为：rollup.github.io

注册账号

创建项目

安装git

下载git安装包直接安装
打开Git Bash命令框

设置用户，用户名和密码都设置为GitHub的
git config --global user.name "Your Name"
git config --global user.email "email@example.com"

win创建SSH KEY

查看是否有SSH key
cat ~/.ssh/id_rsa.pub
如果不存在则创建
ssh-keygen -t rsa -C "171250669@qq.com"
创建后查看
cat ~/.ssh/id_rsa.pub
复制到剪贴板
clip < ~/.ssh/id_rsa.pub

将GitHub项目克隆到本地

进入要放置的文件
git clone git@github.com:Firsmant/info-manage.git

提交代码

进入本地项目目录
添加文件：git add .
提交到本地：git commit -m "first update"
将本地代码同步到服务器：git push origin master

搭建开发环境

版本说明

版本号分三级
0.x.x可以认为是非正式版本、测试版本
从1.x.x开始正式发布版本
"version":"0.0.1"

一级：重构版本
二级：重大功能改进
三级：小升级或者bug修复

规范项目一级目录

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

初始化

进入项目目录运行 npm init按提示完成，参考package.json文件填写相应内容。注意版本号和license不能默认，入口js修改为src/index.js
生成package.json文件

构建工具

使用 webpack

安装npm i babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest webpack webpack-cli --save-dev
后面再加上淘宝镜像
--registry=https://registry.npm.taobao.org
在项目更目录下创建.babelrc文件，添加内容

{ 
    "presets": ["es2015", "latest"],
    "plugins": [] 
}

在项目根目录下创建webpack.config.js文件，添加内容如下
将entry文件发布到output

module.exports = { 
    entry: './src/index.js',
    output: { path: __dirname,
        filename: './release/bundle.js' 
            },
    module: { 
        rules: [{ 
            test: /\.js?$/,
             exclude: /(node_modules)/, 
             loader: 'babel-loader' 
            }] 
    }
}

修改package.json中的scripts，添加"release":"webpack"，说明使用的打包工具

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "release": "webpack"
  },

运行npm run release生成release内容
在example文件夹中新增test.html文件，添加内容


<!DOCTYPE html>
 <html>
  <head> 
    <meta charset="UTF-8"> 
    <title>example</title> 
  </head> 
  <body>
    <p>example</p>

    <script src="../release/bundle.js"></script>
   </body> 
</html>

修改package.json中的scripts增加"example":"http-server -p 8880"

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "release": "webpack",
    "example": "http-server -p 8880"
  },

安装服务器创建工具，运行npm install http-sever -g
将服务跑起来，运行npm run example

浏览器访问localhost:8880/example/test.html

完善README.md

产品简介
产品安装和下载
快速使用（详细文档可以外链）
交流提问区
关于作者（放置博客链接和收款二维码）

写文档 & 写测试用例

测试用例需要用到其它工具

写文档

通过md格式生成文档，安装工具，npm install gitbook-cli -g
根目录下创建SUMMARY.md，内容如下：

# Summary

* [项目介绍](README.md)
* [使用文档](doc/use/README.md)
    * [使用1](doc/use/use1.md)
    * [使用2](doc/use/use2.md)
* [二次开发](doc/dev/README.md)
    * [开发1](doc/dev/dev1.md)
    * [开发2](doc/dev/dev2.md)

执行npm install gitbook -g安装工具
执行gitbook init 按照以上目录在doc中创建文件

gitbook

执行 gitbook build将md文件发布为html文件
在http://localhost:8880/_book/中查看

提交代码

使用 es-lint规范编码

提交代码版本v0.0.1

创建tag并提交

git tag -a 'v0.0.1' -m 'first commit'
git push origin v0.0.1

可以在https://github.com/Firsmant/info-manage/releases进行查看

提交到npm

可以让用户通过npm进行安装

运行npm adduser注册账户
npm login登录用户
项目根目录下执行npm publish .发布到npm

代码升级

创建分支 git checkout -b dev，在分支中进行修改
在package.js中修改版本号,然后提交修改
git add .
git commit -m "0.0.2"
git push origin dev
进入master分支git checkout master
将dev合并到mastergit merge div
提交mastergit push origin master
创建tag并提交到远程
提交到npm