类库从零部署-第一步：创建项目&发布npm

doudizhu
166 阅读1分钟

系列文章

前置工作：注册账户

github

npm

创建项目

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


code fast-cache-ddza

开发环境

初始化 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
avatar
文章
阅读
粉丝