这是一个基于 [email protected] + [email protected] + [email protected] + [email protected] + [email protected] + [email protected] + [email protected] 的多页面脚手架。
本库支持增量更新，支持 gzip 打包，支持第三方资源别名引入，支持静态文件引入，支持使用环境变量。
- 下载并安装node: https://nodejs.org/zh-cn/download/
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 项目打包
npm run build
# 单元测试
npm run test
# 代码语法测试
npm run lint
# 代码格式测试以及纠正
npm run prettier│ .babelrc // babel配置文件
│ .editorconfig // 编辑器配置
│ .env // 环境变量配置
│ .eslintignore // eslint忽略配置
│ .eslintrc // eslint配置
│ .gitignore // git忽略配置
│ .prettierignore // prettier忽略配置
│ .prettierrc // prettier配置
│ build.sh // bash脚本
│ jest.config.js // Jest配置文件
│ LICENSE // LICENSE许可
│ package-lock.json
│ package.json
│ postcss.config.js // postcss配置文件
│ README.md // 项目说明文档
│ tsconfig.json // ts语言配置
│
├─config // 核心配置
│ config.js // 根配置
│ webpack.config.base.js // 基础配置
│ webpack.config.dev.js // 开发环境配置
│ webpack.config.prod.js // 生产环境配置
│
├─coverage // 单元测试结果文件
|
├─src // 用户代码
│
├─static // 静态资源
│
├─tests // 测试文件夹
│
└─views // 页面目标格式化方案为 prettier，主要配置如下：
// ./.prettierrc
{
"tabWidth": 4,
"printWidth": 80,
"semi": false,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": true,
"arrowParens": "avoid",
"requirePragma": false,
"endOfLine": "auto"
}prettier文档链接如下：
代码格式验证规则为eslint，主要配置如下：
// ./.eslintrc
"rules": {
"indent": [0, 4],
"arrow-parens": 0,
"generator-star-spacing": 0,
"no-debugger": 0,
"eol-last": 0,
"eqeqeq": 2,
"camelcase": 0,
"space-before-function-paren": 0,
"quotes": ["error", "single"],
"@typescript-eslint/explicit-function-return-type": [
"off",
{
"allowExpressions": true,
"allowTypedFunctionExpressions": true
}
],
"@typescript-eslint/no-explicit-any": "off",
"prettier/prettier": "error",
"no-var": "error",
"@typescript-eslint/consistent-type-definitions": [
"error",
"interface"
]
}eslint文档链接如下：
代码提交规范使用 cz-customizable，配置文件为.cz-config.js，主要配置如下：
const czConfig = {
...,
{ value: '特性', name: '特性: 一个新的特性' },
{ value: '修复', name: '修复: 修复一个Bug' },
{ value: '文档', name: '文档: 变更的只有文档' },
{ value: '格式', name: '格式: 空格, 分号等格式修复' },
{ value: '重构', name: '重构: 代码重构，注意和特性、修复区分开' },
{ value: '性能', name: '性能: 提升性能' },
{ value: '测试', name: '测试: 添加一个测试' },
{ value: '工具', name: '工具: 开发工具变动(构建、脚手架工具等)' },
{ value: '回滚', name: '回滚: 代码回退' },
}使用方式，利用 git cz 代替 git commit
文档链接：
https://github.com/leoforfree/cz-customizable
适配方案为 postcss-px-to-viewport ，主要配置如下：
// ./postcss.config.js
'postcss-px-to-viewport': {
unitToConvert: 'px',
viewportWidth: 750,
viewportHeight: 1334,
unitPrecision: 3,
viewportUnit: 'vw',
fontViewportUnit: 'vw',
mediaQuery: false
},postcss-px-to-viewport 文档链接：
https://evrone.com/postcss-px-viewport
CSS语法方案为 postcss-preset-env，主要配置如下：
// ./postcss.config.js
'postcss-preset-env': {
browsers: 'last 2 versions',
stage: 3,
features: {},
cssnano: {}
},postcss-preset-env文档链接：
sass文档如下：
less文档如下：
ECMA语法的基础方案为@babel/preset-env，主要配置如下：
// ./.babelrc
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3,
"targets": {
"esmodules": true,
"chrome": "49"
}
}
],
"@babel/preset-typescript"
],@babel/preset-env文档如下：
https://babeljs.io/docs/en/babel-preset-env
可按需增删需要的ECMA提案插件，主要配置如下：
// ./.babelrc
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-proposal-optional-chaining",
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
],
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-private-methods",
{
"loose": true
}
]
]支持[email protected]语法，typescript文档链接如下：
https://www.typescriptlang.org/
使用者可在根目录下的.env文件添加环境变量，示例如下：
HOST=0.0.0.0 # 运行host
PORT=8099 # 运行端口
VERSION=2.0.0 # 当前项目版本
PUBLIC_PATH=/ # 公共路径 https://webpack.js.org/guides/public-path/
WATCH_ANALYZER=false # 生产环境下是否看火焰图本库使用的单元测试框架为[email protected]，[email protected]文档链接如下：
当用户使用url的形式（例如CDN）引入第三方JS文件时，可通过 ./config/webpack.config.base.js 的 externals 进行配置，例子如下：
const baseConfig = {
//...
externals: {
// ...
jquery: 'jQuery',
},
}用户可以在 ./config/webpack.config.dev.js 里的 devServer.proxy 进行转发请求配置，例子如下：
const webpackDev = {
//...
devServer: {
// ...
proxy: {
'/api': 'http://localhost:3000'
},
},
}文档链接：
https://webpack.js.org/configuration/dev-server/#devserverproxy
用户可以在 ./config/config.js 里的 dev.alias 配置路径重定向，例子如下：
const config = {
// ...
dev: {
alias: {
static: resolve('static'),
}
}
}
// .js/ts里
import '@/style/index.css'
// .css/less/scss里
// background: url('~static/img/qrcode-all1.png') 50% 50% / cover no-repeat;文档链接：
https://webpack.js.org/configuration/resolve/#resolvealias
如果你喜欢探讨技术，或者对本仓库有任何的意见或建议，非常欢迎加鱼头微信好友一起探讨，当然，鱼头也非常希望能跟你一起聊生活，聊爱好，谈天说地。 鱼头的微信号是：krisChans95 也可以扫码关注公众号，订阅更多精彩内容。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent