Ying's Blog🍗
Appearance

如何发布一个npm和plugin并定制脚手架?

影大宝🧐2023-07-08 00:00:00总结工程化

INFO

在前端编码工程化中，需要基于markdownlintopen in new window、commitlintopen in new window、stylelintopen in new window、prettierlintopen in new window及ESLintopen in new window，梳理团队内部规范，并基于 lint 工具定制了相关规则的 npm 包，支持项目中直接引用。

发布npm包简单流程

1.账号注册

注册页面open in new window

2.npm包基本配置

  • 创建文件夹：
    mkdir my_firs_npm
cd my_first_npm
  • 初始化项目：
    npm init/npm init -y
  • 配置基本内容：npm官方文档open in new window，至少包含：
    • package.json（包的基本信息）
      {
  "name": "my_first_npm",
  "version": "1.0.0",    //标明发布时的版本
  "description": "my first npm package",
  "main": "index.js",    //写清楚入口文件
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  }, 
  "keywords": [//标明关键字，方便其他人检索我们所创建的包
    "npm",
    "packge"
  ],
  "author": "wlaozhichi",
  "license": "ISC"   //使用ISC作为许可证
}
    • README.md（文档）
    • index.js （入口文件）

3.登录账号和发布命令

npm login //登录npm网站
npm publish //发布npm包，也可能报错，大多原因是包名重合
npm unpublish 包名 -force //删除包名

发布 npm 包

我的npm主页open in new window

编写一个plugin

参考标准

《ESLint-创建插件》open in new window，创建一个插件，包括两部分：

  • rules
    //1.Custom Rules，创建对应的规范，比如严格程度是什么，告警?提醒？声明?
//与此同时，fixable是否通过编码的方式自动修复等:
module.exports = {
  meta: {
    type: "suggestion",
    docs: {
        description: "Description of the rule",
    },
    fixable: "code",//
    schema: [] // no options
  },
  create: function(context) {
    return {
      // 2.配置项中如何创建 callback functions
    };
  }
};
  • test：开源项目中都会有test文件夹，即规范化校验，本地的测试用例。
    //package.json
"scripts": {
  "test": "jest",
  "prepublishOnly": "npm run test"
},
"devDependencies": {
  "eslint": "^8.7.0",
  "jest": "^26.6.3"
},

自定义编写插件

eslint-plugin-yiboopen in new window，支持：

定制脚手架

核心文件梳理

参考github仓库open in new window，更详细的代码见此。

  • 判断 npm 包类型和是否为最新版src/actions/updates.ts
  • 如何从package.json中读取常量src/utils/constants.ts
  • 告诉cli安装时需要的配置项，和vue-cli安装时提示类似src/types.ts
    export interface Config {
  // 是否启用 ESLint
  enableESLint?: boolean;
  // 是否启用 stylelint
  enableStylelint?: boolean;
  // 是否启用 markdown lint
  enableMarkdownlint?: boolean;
  // 是否启用 prettier
  enablePrettier?: boolean;
  // ESLint 配置项
  eslintOptions?: ESLint.Options;
  // stylelint 配置项
  stylelintOptions?: stylelint.LinterOptions;
  // markdownlint 配置项
  markdownlintOptions?: markdownlint.Options;
}
  • 核心文件src/actions/init.ts，定义安装cli的步骤；
    //如inquirer是交互式核心，让用户选择的配置，选择项目语言和框架
import inquirer from 'inquirer';
const chooseEslintType = async (): Promise<string> => {
  const { type } = await inquirer.prompt({
    type: 'list',
    name: 'type',
    message: `Step ${++step}. 请选择项目的语言（JS/TS）和框架（React/Vue）类型：`,
    choices: PROJECT_TYPES,
  });
  return type;
};

cli实现一键接入、一键扫描、一键修复

详细代码见github仓库open in new window

  • init 支持模板初始化创建 读取安装
  • scan 根目录执行 扫描出项目关于规范化的问题
  • fix 自动修复 并不是万能的 是根据lint自己的配置项是否符合我们的预期
  • commit-file-scan 以上三点日常开发已足够，但第四点通过husky，针对git中pre-commit钩子进行拦截
  • commit-msg-scan 针对提交信息扫描 commit-msg commitlint
await encode-fe-lint.init({})

可参考：npm包open in new window

ON THIS PAGE