js工具类库从零部署npm流程

doudizhu
429 阅读2分钟

注册账户

github

github.com/signup?ref_…

npm

www.npmjs.com/signup

创建项目

New repository

  Repository name
    fast-cache-ddza
  Description (optional)
    短小精悍的前端缓存工具，防止内存泄露
  Public
    Add a README file
    Add .gitignore
      Node
    Choose a license
      MIT

访问：https://github.com/doudizhu/fast-cache-ddza

添加 ssh key

  $ ssh-keygen
  操作：一路回车

  $ pbcopy < ~/.ssh/id_rsa.pub
  复制key至剪切板中

  打开：https://github.com/settings/keys
  New SSH key

下载代码

注意选择use ssh
git clone git@github.com:doudizhu/fast-cache-ddz.git


cd fast-cache-ddza
code .

开发环境

初始化 npm 配置文件

  $ npm init

  package name: (fast-cache-ddz)
  version: (1.0.0) 0.0.1
  description: 短小精悍的前端缓存工具，防止内存泄露
  entry point: (index.js) src/index.js
  test command:
  git repository: (https://github.com/doudizhu/fast-cache-ddz.git)
  keywords: cache
  author: https://github.com/doudizhu/fast-cache-ddz
  license: (ISC) MIT


  版本号分三级 0.0.0
  重构版本
  重大功能改进
  小升级或者bug修复
  0.0.1 零开头，非正式版本

验证提交

  git status
  git add .
  git commit -m 'first ci'
  git push

规范一级目录

  $ mkdir src release test doc example
  $ vim src/index.js
    alert('fast-cache')

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

  ps: vue老版本中有build


  // 提交
  git add .
  git commit -m '规范一级目录'
  git push

构建工具,webpack 依赖安装+配置

webpack 依赖安装

  $ npm i babel-core@6.26.3 babel-loader@7.1.4 babel-polyfill@6.26.0 babel-preset-es2015@6.24.1 babel-preset-latest@6.24.1 webpack@4.7.0 webpack-cli@2.1.2 --save-dev --registry=https://registry.npm.taobao.org


  // 提交
  git add .
  git commit -m 'webpack 依赖安装'
  git push

文件配置

.babelrc

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

webpack.config.js

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": {
  "example": "http-server -p 8880",
  "release": "webpack",
  "test": "echo \"Error: no test specified\" && exit 1"
},

发包测试

$ npm run release

/example/test.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <p>fast-cache test</p >
    <script src="../release/bundle.js"></script>
  </body>
</html>

预览

  $ sudo npm install http-server -g
  $ npm run example

  访问： http://localhost:8880/example/test.html


  // 提交
  git add .
  git commit -m '### 文件配置'
  git push

规范 git 分支

分支名： dev next fix-bug

新建分支:

  $ git checkout -b dev
  $ git push origin dev

完善 readme

    # fast-cache-ddza
    
    短小精悍的前端缓存工具，防止内存泄露
    
    
    ## 简介
    
    特色（推广的一些亮点）
    
    
    ## 安装下载
    
    https://github.com/doudizhu/fast-cache-ddza/releases
    - `npm i fast-cache-npm`
    - CDN http://unpkg.com/fast-cache-ddza/release/bundle.js
    
    ## 快速使用
    
    ```
    var FC = window.FastCache;
    var cache = new FC();
    cache.set('a',100)
    alert(cache.get('a'))
    ```
    
    - [使用文档](./doc/use/README.md)
    - [二次开发文档](./doc/dev/README.md)
    
    
    ## 交流 & 提问
    
    - 提问（提供用户交流区，类似论坛）： https://github.com/doudizhu/fast-cache-ddza/issues
    - QQ 群：微信群（及时回馈） 
    
    ## 关于作者
    
    - 个人简介
    - 收款二维码

提交

git add .
git commit -m '完善 readme'
git push origin dev

merge 分支

git checkout main
git pull
git merge dev
git push

代码提交

写代码

切换至 dev 分支

git checkout dev
git pull origin dev

src/index.js

class FastCache {
  constructor() {
    this.list = {};
  }
  set(key, value) {
    this.list[key] = value;
  }
  get(key) {
    return this.list[key];
  }
}

window.FastCache = FastCache;

example/test.html 测试用例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>example</title>
  </head>
  <body>
    <p>example</p >
    <script src="../release/bundle.js"></script>
    <script>
      var FC = window.FastCache;
      var cache = new FC();
      cache.set("a", 100);
      alert(cache.get("a"));
    </script>
  </body>
</html>

测试结果

$ npm run release

访问(清空缓存)： http://localhost:8880/example/test.html

// 提交
git add .
git commit -m '## 写代码'
git push origin dev

提交代码

创建 tag 并提交

git checkout main
git merge dev
git push


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


// 查看：https://github.com/doudizhu/fast-cache-ddza/releases

发布 npm

修改源

  // 安装修改源工具
  $ sudo npm install -g nrm

  // *** 切换
  $ nrm use npm

  // 查看是否切换成功
  $ npm config get registry
  /*
    npm -------- https://registry.npmjs.org/
    yarn ------- https://registry.yarnpkg.com/
    cnpm ------- http://r.cnpmjs.org/
    taobao ----- https://registry.npm.taobao.org/
  */

发布

  npm login

  npm publish .

查看安装

查看

  库地址：https://www.npmjs.com/package/fast-cache-ddza
  cdn: https://unpkg.com/fast-cache-ddza@0.0.1/release/bundle.js

安装

npm i fast-cache-ddza

发布官网

也可文档与项目代码合并在一起，配置 github page 访问，如：/(_book)

创建 github page

访问：https://github.com/new
  Repository name:
    fast-cache-ddza.github.io
  Add a README file
  点击：create repository

跳转至：https://github.com/doudizhu/fast-cache-ddza.github.io
  settings
    githup pages
      点击：Check it out here!

配置 github page 访问

跳转至： https://github.com/doudizhu/fast-cache-ddza.github.io/settings/pages
  Source
    Branch:main 
    /(root)
    点击：Save

配置简单内容测试

克隆项目代码

mkdir package && cd package
git clone git@github.com:doudizhu/fast-cache-ddza.github.io.git
code fast-cache-ddza.github.io/

index.html 创建入口页

<p>hello fast-cache</p >

提交访问:

git add .
git commit -m '## 配置 github page 访问 ## 配置简单内容测试'
git push

访问：https://doudizhu.github.io/fast-cache-ddza.github.io/

编写使用文档

生成目录结构

安装gitbook

$ sudo npm i gitbook-cli -g

$ gitbook -v // 查看版本信息。此命令会默认同时安装 GitBook。


// 报错: "cb.apply is not a function"
// 解决方式：
$ sudo vim /usr/local/lib/node_modules/gitbook-cli/node_modules/npm/node_modules/graceful-fs/polyfills.js
  将65行起的三行都注释掉：
  // fs.stat = statFix(fs.stat)
  // fs.fstat = statFix(fs.fstat)
  // fs.lstat = statFix(fs.lstat)

// 原因：为了解决旧版本返回uid+gid时候的数据类型的问题，新版本此处反而会干扰执行
// 参考博文: https://mizeri.github.io/2021/04/24/gitbook-cbapply-not-a-function/

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)

生成目录初始化

$ gitbook init


// 报错：TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received an instance of Promise
// 解决方式：降级node版本
$ touch ~/.bash_profile
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
$ nvm install 12.22.3
$ nvm use 12.22.3

// 再次执行
$ gitbook init

写文档

doc/dev/README.md

# 二次开发

- 下载 `git@github.com:doudizhu/fast-cache-ddz.git`
- 编辑`src`目录的源码
- 执行`npm run release`编译
- 执行`npm run example`启动示例

doc/use/README.md

    # 使用文档
    
    ## 初始化
    ```js
    var FC = window.FastCache;
    var cache = new FC();
    ```
    
    ## 设置
    ```js
    cache.set('a',100)
    ```
    
    ## 获取
    ```js
    cache.get('a')

gitignore忽略,新增

_book
.DS_Store

提交

$ git add .
$ git commit -m '# 编写使用文档 ## 生成目录结构'
$ git push

发布至官网

手动

  gitbook build
  cp -r _book/ ../package/fast-cache-ddza.github.io

  cd ../package/fast-cache-ddza.github.io
  git pull
  git add .
  git commit -m 'update'
  git push

  cd ../fast-cache-ddza.github.io

访问：https://doudizhu.github.io/fast-cache-ddza.github.io/

脚本发布官网脚本

  $ npm run packagePage

访问：https://doudizhu.github.io/fast-cache-ddza.github.io/

scripts/packagePage.js

const path = require("path");
const callfile = require("child_process");

const cwd = path.resolve(__dirname, `../`)
const packagePath = path.resolve(__dirname, `../package/fast-cache-ddza.github.io`)

callfile.exec(
  `
    gitbook build &&
    cp -r _book/ ../package/fast-cache-ddza.github.io &&
    cd ../package/fast-cache-ddza.github.io &&

    git pull &&
    git add . &&
    git commit -m 'update' &&
    git push
  `,
  {
    cwd,
  },
  async function (error, stdout, stderr) {
    console.log(error, stdout, stderr)
  }
)

scripts/push.js

const path = require("path");
const callfile = require("child_process");

const cwd = path.resolve(__dirname, `../`)

const commitMsg = process.argv[2] // commit信息
const branch = process.argv[3] || 'dev' // 分支名


callfile.exec(
  `
    git checkout ${branch} &&
    git reset --soft HEAD^ &&
    git pull origin ${branch} &&
    git add . &&
    git commit -m ${commitMsg} &&
    git push origin ${branch}
  `,
  {
    cwd,
  },
  async function (error, stdout, stderr) {
    console.log(error, stdout, stderr)
  }
)

scripts/mergeMain.js

const path = require("path");
const callfile = require("child_process");

const cwd = path.resolve(__dirname, `../`)



callfile.exec(
  `
    git checkout main &&
    git reset --soft HEAD^ &&
    git pull &&
    git merge dev &&
    git push
  `,
  {
    cwd,
  },
  async function (error, stdout, stderr) {
    console.log(error, stdout, stderr)
  }
)

package.json

新增
  "packagePage": "node scripts/packagePage",
  "push": "node scripts/push",
  "mergeMain": "node scripts/mergeMain",
完整
{
  "name": "fast-cache-ddz",
  "version": "0.0.1",
  "description": "短小精悍的前端缓存工具，防止内存泄露",
  "main": "src/index.js",
  "scripts": {
    "packagePage": "node scripts/packagePage",
    "push": "node scripts/push",
    "mergeMain": "node scripts/mergeMain",
    "example": "http-server -p 8880",
    "release": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/doudizhu/fast-cache-ddz.git"
  },
  "keywords": [
    "cache"
  ],
  "author": "https://github.com/doudizhu/fast-cache-ddz",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/doudizhu/fast-cache-ddz/issues"
  },
  "homepage": "https://github.com/doudizhu/fast-cache-ddz#readme",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-latest": "^6.24.1",
    "webpack": "^4.7.0",
    "webpack-cli": "^2.1.2"
  },
  "dependencies": {
    "user": "0.0.0"
  }
}

脚本提交

dev分支提交

$ npm run push 脚本发布官网脚本

merge至主分支

$ npm run mergeMain

合并 pr

  访问 pull request：
  https://github.com/doudizhu/fast-cache-ddz/pulls

  确认没有问题，点解按钮：
  Merge pull request

升级

代码,清空缓存功能

src/index.js

class FastCache {
  constructor() {
    this.list = {};
  }
  set(key, value) {
    this.list[key] = value;
  }
  get(key) {
    return this.list[key];
  }
  clear() {
    this.list = {}
  }
}

window.FastCache = FastCache;

example/test.html 测试页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>example</title>
  </head>
  <body>
    <p>example</p >
    <script src="../release/bundle.js"></script>
    <script>
      var FC = window.FastCache;
      var cache = new FC();
      cache.set("a", 100);
      console.log("clear before", cache.get("a"));
      cache.clear();
      console.log("clear after", cache.get("a"));
    </script>
  </body>
</html>

编译&测试

$ npm run release
$ npm run example

访问(清空缓存)：http://127.0.0.1:8880/example/test.html

提交

npm run push 升级,清空缓存功能

升级文档

doc/use/README.md

    # 使用文档

    ## 初始化
    ```js
    var FC = window.FastCache;
    var cache = new FC();
    ```

    ## 设置
    ```js
    cache.set('a',100)
    ```

    ## 获取
    ```js
    cache.get('a')
    ```


    ## 清空
    ```js
    cache.clear()
    ```

提交

npm run push 升级,升级文档

发布至官网

$ npm run packagePage

访问：https://doudizhu.github.io/fast-cache-ddza.github.io/

发布npm

修改package.json版本

{
  "version": "0.0.2",
}

提交

$ npm run push 升级版本
$ npm run mergeMain

创建tag,提交到远程

 $ git tag -a v0.0.2 -m 'v0.0.2'
 $ git push origin v0.0.2

发布npm

npm login
npm publish .

ps:

修复文档无目录问题

解决方式：修复格式

参见commit: 6ae59d8
访问：http://127.0.0.1:5501/_book/

// 提交
$ npm run push 修复文档无目录问题
// 文档发布
$ npm run packagePage
访问：https://doudizhu.github.io/fast-cache-ddza.github.io/

原因：md文件被vscode自动格式化导致，关闭自动格式化md

settings.json

{
    "[markdown]": {
    "editor.wordWrap": "on",
    "editor.quickSuggestions": false,
    "editor.formatOnSave": false
  },
}

参考博文

从零做一个前端开源项目
教程-GitBook的安装、配置及优化（超全）

avatar
文章
阅读
粉丝