Lerna 搭建脚手架 第一集

前置学习

• Lerna 入门篇
• Lerna 命令

TL;DR

直接体验 👉👉👉

项目地址

缘由

• 浪费大量时间去创建，配置相同结构的项目
• 学习lerna多包管理
• 学习开发脚手架

期望

待更新...

技术选择

• lerna: 多包管理
• typescript: 静态语法检查
• commander: 命令行命令解析
• Inquirer: 终端交互
• ora: 终端加载器
• chalk: 终端字符串样式

创建项目

mkdir infinity-gems && cd infinity-gems

npm i lerna typescript -D

lerna init -i

代码检查 & 格式化 & 规范提交

• 代码检查

npm i eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

eslint --init

会根据你的选择生成一个 eslint相关的配置文件, 我选择的是 js文件

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  extends: [
    'standard'
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2018
  },
  plugins: [
    '@typescript-eslint',
  ],
  rules: {
    'no-var': 'error',
    'semi': ['error', 'always'],
    'indent': [ 'error', 2 ],
    'quotes': [ 'error', 'single' ],
    'no-extra-semi': 'error',
    'prettier/prettier': 'error',
    "space-before-function-paren": ["error", {
      "anonymous": "never",
      "named": "never",
      "asyncArrow": "never"
    }],
    "comma-dangle": ["error", {
      "arrays": "always-multiline",
      "exports": "always-multiline",
      "functions": "never",
      "imports": "always-multiline",
      "objects": "always-multiline",
    }]
  }
}

以及忽略格式化的文件 .eslintignore

packages/**/**.test.ts
node_modules/

配置下 package.json中的 scripts

{
  "scripts": {
        "eslint": "eslint --fix --color --ext .ts packages/**"
  }
}

• 格式化

npm i  prettier eslint-plugin-prettier -D

在 eslint配置文件中修改下 plugins

module.exports = {
  ...,
  plugins: [
    '@typescript-eslint',
+   'prettier'
  ],
  ...,
}

再在根目录下配置一个 .prettierrc文件

{
  "printWidth": 120,
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "bracketSpacing": true,
  "singleQuote": true,
  "arrowParens": "avoid"
}

以及忽略格式化的文件 .prettierignore

packages/**/**.test.ts
node_modules/

配置下 package.json中的 scripts

{
  "scripts": {
    "prettier": "prettier --write packages/**/**.ts"
  }
}

• 提交

npm i husky @commitlint/cli @commitlint/config-conventional lint-staged -D

配置下 package.json中

{
  "scripts": {
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "packages/**/**.{ts}": [
      "npm run prettier",
      "npm run eslint",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": [
        "lint-staged"
      ],
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
}

配置 commitlint.config.js

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'docs',
        'style',
        'refactor',
        'perf',
        'test',
        'build',
        'ci',
        'chore',
        'revert',
        'config'
      ]
    ],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 150]
  }
};

创建package

lerna create thanos

lerna create thanos

生成目录结构

├── .npmignore
├── README.md
├── __tests__
│   └── power-gem.test.js
├── index.js
├── lib
│   ├── index.js
├── package.json

至此，我们的初始化工作全部完成了。

参考资料

vue-cli

create-react-app

遇到的问题及其解决方法