build-tools

介绍

构建组件库的工具

软件架构

npm i willow-build-tools

安装教程

1. xxxx
2. xxxx
3. xxxx

使用说明

1. xxxx
2. xxxx
3. xxxx

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

代码规范配置（EsLint + Prettier）

1. vscode 安装 Prettier - Code formatter
2. Ctrl + shift + p / command + shift + p 搜索setting.json 文件
3. 配置

 "editor.formatOnSave": true,
 "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

• EsLint 负责代码质量 + 代码风格
• Prettier 负责代码格式化

两者会有冲突，请在

// .eslintrc    
{      
    "extends": ["prettier"] // prettier 一定要是最后一个，才能确保覆盖    
}

统一代码格式和可以在提交时自动格式化，安装husky+prettier+pretty-quick，在package.json中加入

"husky": {
  "hooks": {
    "pre-commit": "pretty-quick --staged"
  }
}

yarn global bin 查看全局的bin目录

功能点罗列

1. 打包后支持支持三种模块化UMD，ES，CommonJS
2. 支持TS
3. 支持导出类型
4. 支持编译TS

实现思路

1. 先写组件
2. 再思考需要哪些功能
3. 罗列功能
4. 逐步实现功能

tsconfg.json中jsx属性三种JSX模式：preserve，react和react-native

1. 在preserve模式下生成代码中会保留JSX以供后续的转换操作使用，输出文件会带有.jsx扩展名
2. react模式会生成React.createElement，在使用前不需要再进行转换操作了，输出文件的扩展名为.js
3. react-native模式相当于preserve，它也保留了所有的JSX，但是输出文件的扩展名是.js

发布