@packy-tang/sao-esm v1.1.0

sao-esm

集成rollup、vue用于快速构建生成esm格式的npm包模板

特性

本包特性包括以下内容：

• 构建
  • 包产出支持，支持umd/cjs/esm格式内容的产出^1
  • 包含babel兼容
  • 支持Vue组件构建及本地调试
  • 支持WMF特性^4
• 自动化^2
  • 支持自动版本管理
  • 支持自动产出日志
  • 支持一键发布npm
• 测试
  • 支持Mocha单元测试，支持es2015写法 ^3
  • 测试覆盖报告支持
  • 增加关于Vue的e2e测试及可视化支持
• 基础设置
  • 通用编辑器设置支持，默认缩减为2空格

使用

直接使用

# 直接安装
$ npx sao npm:@packy-tang/sao-esm my-module

正常使用

本模板基于 SAO 工具制作，需要先安装sao。

$ yarn global add sao
# or
$ npm i -g sao

# 使用
$ sao npm:@packy-tang/sao-esm my-module

研发调试

# sao-esm项目地址：/home/lpre/sao-esm
$ sao /home/lpre/sao-esm my-module

清除sao模板缓存

$ rm -rf ~/.sao/

初次发版

初次发版需要在本地操作，下面是具体步骤：

# 切换并创建`production`分支
$ git checkout -b production

# 自动执行版本更新、产出日志、提交并打上标签等工作
# -- 1.0.0 这步是指定版本号
$ npm run release -- 1.0.0

再次发版

下面是发布命令：

# 请自行切换至`production`分支，并同步`master`分支至`production`分支。
# 在`production`分支下进行
$ npm run release

命令

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "rollup -c",
    "watch": "rollup -c -w",
    "pretest": "rollup -c -m inline",
    "test": "mocha './tests/unit/*.spec.js'",
    "test:coverage": "nyc mocha './tests/unit/*.spec.js'",
    "rerelease": "npm run build",
    "release": "release-it",
    "nvm": "sh bin/nvm.sh"
  },
}

• 可用的
  • serve 本地运行
  • build 构建包代码
  • watch 监听代码变化，并持续构建新的包代码
  • test 根据当前包代码进行测试
  • test:coverage 测试并产出测试覆盖率
  • release 执行版本更新、产出日志、提交并打上标签等工作，更多内容请看详细说明
  • nvm 使用nvm切换与当前项目一致的node版本
• 预设
  • pretest 测试前置命令
  • rerelease 自动发布的前置命令

release命令使用说明

# 指定升级版本
$ npm run release 1.0.1 

# 自动完成
$ npm run release -- --ci

TODOList

• .jsconfig VSCode配置支持
• VSCode编辑器内部断点支持
• 代码格式化设置（prettier）
• ESLint代码检测设置
• 创建时增设node版本限制可选项

仓库制作说明

本仓库是基于lpreterite/sao-esmodule-mold创建，并添加了release-it自动日志产出工具，及drone的配置（CI/CD）。

拆分说明与建议

见 拆分说明与建议 。

License

MIT © packy-tang <lpreterite@126.com>

^1: 单元测试模块由于使用reify导致@vue/test-utils不能解析vue组件，抛出下面的错误。所以单元测试的文件下暂时不支持esm写法。

^2: 此包使用release-it来实现做自动化实现，其中自动管理版本功能是基于angular.js社区的提交规范来识别处理。详细的提交规范可阅读这份《如何维护更新日志》内容。

^3: 基于Vue指南将用于npm平台下包的代码使用rollup构建。

^4: WMF全称Webpack Module Federation，是webpack5 推出名叫模块联合的新功能，用于解决前端巨石项目的困境。具体看这三份文章：《Webpack 5 之 模块联合（Module Federation）》、《模块共享那些事》、《探索 webpack5 新特性 Module federation 在腾讯文档的应用》。