结合GitLab搭建一个内部私有库模版

会当凌绝顶，一览众山小。------杜甫

引言

大家好我是晴天同学，我们在平时开发的时候可能需要构建一些公司内部的私有库，我们不希望别人可以访问到我们的源代码，只希望我们公司指定权限的人使用，比如前端库只能前端同学使用，这时候我们就可以使用gitlab来搭建公司内部私有仓库里。

一、 创建项目

在gitlab上常见一个内部包的文件夹，例如：package，创建一个项目并进入，执行yarn init ，一路回车。

二、 配置项目

1、安装rollup和typescript

yarn add rollup typescript -D

2、 配置typescript配置文件

yarn tsc --init

生成一个默认的配置文件，然后改成我们下面的配置

{
  "compilerOptions": {
    "target": "es5" /* 编译目标 */,
    "module": "commonjs" /* 项目模块类型 */,
    "lib": ["ES2018", "DOM"],
    "baseUrl": "./",
    "paths": {
      "*": ["node_modules/*", "lib/*"]
    },
    "allowJs": true /* 是否允许js代码 */,
    "checkJs": true /* 检查js代码错误 */,
    "declaration": true /* 自动创建声明文件(.d.ts) */,
    "declarationDir": "./lib" /* 声明文件目录 */,
    "sourceMap": true /* 自动生成sourcemap文件 */,
    "outDir": "lib" /* 编译输出目录 */,
    "rootDir": "./src" /* 项目源码根目录，用来控制编译输出的目录结构 */,
    "strict": true /* 启用严格模式 */
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules", "**/__test__/*"]
}

3、 配置rollup.config.js文件

运行下面命令，安装以下几个插件：

1. @rollup/plugin-node-resloves 处理路径

2. @rollup/plugin-typescript 支持ts

3. @rollup/plugin-commonjs 处理commonjs

4. rollup-plugin-terser 压缩umd规范的输出文件

5. rollup-plugin-delete 每次打包前清楚lib下文件

const resolve = require('@rollup/plugin-node-resolve');
const typescript = require('@rollup/plugin-typescript');
const commonjs = require('@rollup/plugin-commonjs');
const del = require('rollup-plugin-delete');
const { terser } = require('rollup-plugin-terser');

module.exports = [
  {
    input: './src/index.ts',
    output: [
      {
        dir: 'lib',
        format: 'cjs',
        entryFileNames: '[name].cjs.js',
        sourcemap: false, // 是否输出sourcemap
      },
      {
        dir: 'lib',
        format: 'esm',
        entryFileNames: '[name].esm.js',
        sourcemap: false, // 是否输出sourcemap
      },
      {
        dir: 'lib',
        format: 'umd',
        entryFileNames: '[name].min.js',
        name: 'MY_PACKAGE', // umd模块名称，相当于一个命名空间，会自动挂载到window下面
        sourcemap: false,
        plugins: [terser()],
      },
    ],
    plugins: [
      resolve(),
      commonjs(),
      typescript({ module: 'ESNext' }),
      del({ targets: 'lib/*' }), // 删除 lib 文件夹下的所有文件
    ],
  },
];

4、 修改package.json文件

name的命名方式：@你的文件夹名/你的项目名

{
  "name": "@package/你的项目名",
  "version": "1.0.0",
  "description": "前端midi播放组件",
  "main": "lib/index.cjs.js",
  "module": "lib/index.esm.js",
  "jsnext:main": "lib/index.esm.js",
  "browser": "lib/index.min.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
  "scripts": {
    "build": "rollup -c",
    "test": "jest",
    "coveralls": "jest --coverage",
    "prepare": "husky install"
  },
  "devDependencies": {
    "@commitlint/cli": "^17.7.2",
    "@commitlint/config-conventional": "^17.7.0",
    "@rollup/plugin-commonjs": "^25.0.5",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@rollup/plugin-typescript": "^11.1.5",
    "@types/jest": "^29.5.5",
    "husky": "^8.0.3",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "rollup": "^4.0.2",
    "rollup-plugin-delete": "^2.0.0",
    "rollup-plugin-terser": "^7.0.2",
    "ts-jest": "^29.1.1",
    "typescript": "^5.2.2"
  },
  "dependencies": {
  }
}

告诉使用者不同规范使用哪个文件

● "main": "lib/index.cjs.js", // 当使用commonjs规范时会使用这个包

● "module": "lib/index.esm.js", // 使用esm时，会使用这个包

● "jsnext:main": "lib/index.esm.js", //这个同上，不过这个是社区规范，上面是官方规范

● "browser": "lib/index.min.js", // umd规范，当直接在浏览器中开发时，可以直接下载release包并在浏览器中使用script导入

ts类型文件

● "types": "lib/index.d.ts"

使用yarn build 打包项目

● "scripts": { "build": "rollup -c" }

files 字段是用于约定在发包的时候NPM 会发布包含的文件和文件夹（用不到）

● "files": [ "lib" ]

5、 单元测试

安装jest

jest的默认环境是node，但是我们这个工具库是面向前端的，肯定需要操作dom，所以需要安装yarn add jest-environment-jsdom -D 来支持DOM和BOM操作

yarn add -D jest ts-jest @types/jes
yarn add jest-environment-jsdom -D

配置jest.config.mjs文件

export default {
  clearMocks: true,
  coverageProvider: 'v8',
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  testEnvironmentOptions: {
    userAgent:
      'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36',
  },
};

在package.json中添加命令

{
  "scripts": {
    "test": "jest",
    "coveralls": "jest --coverage",
  }
}

创建src/__test__文件夹用于测试代码，具体使用见jest官网

6、 配置commit检查

安装husky

yarn add husky -D

在package.json中添加命令并运行一次

{
    "prepare": "husky install"
}

yarn run prepare

安装commitlint

yarn add @commitlint/config-conventional @commitlint/cli -D

配置commitlint.config.js规范

// commitlint.config.js

module.exports = {
    extends: ["@commitlint/config-conventional"],
    rules: {
        "type-enum": [
            2,
            "always",
            [
                "feat", // 增加新功能
                "fix", // 修复bug
                "docs", // 只改动了文档相关的内容
                "style", // 不影响代码含义的改动，例如去掉空格、改变缩进、增删分号
                "refactor", // 代码重构时使用
                "test", // 添加测试或者修改现有测试
                "build", // 构造工具的或者外部依赖的改动，例如webpack，npm
                "chore", // 不修改src或者test的其他修改，例如构建过程或辅助工具的变更
                "revert", // 执行git revert打印的message
                "pref", // 提升性能的改动
                "merge" // 代码合并
            ]
        ],
        "type-case": [0],
        "type-empty": [0],
        "scope-empty": [0],
        "scope-case": [0],
        "subject-full-stop": [0, "never"],
        "subject-case": [0, "never"],
        "header-max-length": [0, "always", 72]
    }
};

添加shell脚本

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

这样我们提交的时候就会按照commitlint.config.js的规范来提交

7、 配置.gitignore文件

node_modules/
coverage/
*.log
*.lock

8、 配置上传OSS脚本

根目录创建oss.update.js文件

const fs = require('fs'); //node fs模块
const path = require('path'); //node path模块
const OSS = require('ali-oss');

// 实例化OSS Client
const client = new OSS({
  // region填写Bucket所在地域。例如：北京 oss-cn-beijing
  region: 'oss-cn-beijing',
  // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
  accessKeyId: 你的accessKeyId,
  accessKeySecret: 你的accessKeySecret,
  // 阿里云 oss 存储空间名称，上传到oss浏览器下的文件夹下
  bucket: '你的bucket',
});

const rootPath = path.resolve(__dirname, './lib'); //获取根路径下的所有文件
let filepaths = []; //收集所有文件路径
let putCount = 0; //计算上传文件数

//读取dist文件夹下的所有文件
function readFileSync(filepath) {
  let files = fs.readdirSync(filepath);
  files.forEach(filename => {
    let p = path.join(filepath, filename); //获取当前文件绝对路径
    let stats = fs.statSync(p);
    //如果是文件就push进filepaths里面
    if (stats.isFile()) {
      filepaths.push(p);
    }
    //如果是文件夹，递归调用
    else if (stats.isDirectory()) {
      readFileSync(p);
    }
  });
}

function put(filepath) {
  const p = filepath.replace(rootPath, '').substr(1);
  const _p = `你的文件夹名字/你的项目名/${p.replace('\', '/')}`; //替换绝对路径
  return client.put(_p, filepath);
}

async function update() {
  console.log('准备 上传/更新 文件');
  try {
    // 递归获取所有待上传文件路径
    readFileSync(rootPath);
    const retAll = filepaths.map(filepath => {
      putCount++;
      console.log(`任务添加: ${filepath}`);
      return put(filepath);
    });

    // await Promise.all(retAll);
    Promise.all(retAll).then(res => {
      const resAll = res.map(r => {
        return r.res.statusCode === 200;
      });
      if (Object.keys(resAll).length === putCount) {
        console.log('文件 上传/更新 完毕');
      }
    });
  } catch (e) {
    console.log(e);
  }
}

// 执行上传
update();

使用node oss.update.js命令将打包好的文件上传到oss上

这样我们就完成了一个gitlab私有库的搭建

三、使用

首先，在项目的 package.json文件中增加以下代码

  "dependencies": {
    "@你的文件夹名/你的项目名": "项目的ssh路径，例如：ssh://git@gitlab.xxx.com:xxx/文件夹/项目名.git",
  }

其次，使用下面命令将其安装到本地项目中

npm install @你的文件夹名/你的项目名
# 或
yarn add @你的文件夹名/你的项目名

采用 cdn 的方式引入库，默认库的模块名称为 上述自己定义的MY_PACKAGE，自动挂载到 window 上

<script src="自己上传的路径/你的文件夹名/你的项目名/index.min.js"></script>
<script>
  var myPackage = window.MY_PACKAGE;
</script>

更新库

npm install @你的文件夹名/你的项目名
# 或
yarn upgrade @你的文件夹名/你的项目名

参考

使用Typescript和Rollup从零开发一个前端工具库 - 掘金