特别说明
由于mock使用了Macaca DataHub，必须使用node12.x下载
nvm use 12Feature
- 支持mock功能（集成Macaca DataHub）
- 支持splitChunk，分基础包和业务包
- 支持使用node环境变量，根目录下.env.(production | development)文件配置环境即可，在项目中使用
process.env.xxx - 支持react 单页面(spa)、多页面(mpa)开发
- 支持externals免打包，通过script [BootCDN链入] (https://www.bootcdn.cn/)
- 支持css module，支持less。(推荐)
- 支持手机适配，初始化项目选择Mobile即可
import style from './index.module.(less|css)'
import React from 'react'
const About = () => (
// 会自动将连字符转换为驼峰 main-container => mainContainer
<div className={style.mainContainer}>
this is About page
</div>
).main-container {
border: 1px solid red;
}- 支持typescript
- 支持热更新
- 使用thread-loader、cache-loader、hard-source-webpack-plugin，打包速度up！
- 本地8080端口被占用，则自动开启8080+
- dev环境使用完整source-map，便于debugger，prod则不使用source-map
Usage
Install
全局安装
npm i @wont/cli@latest -g初始化项目
- 执行init后，根据cli提示输入项目名称，cli会自动生成对应项目，并装好相关依赖
wont-cli init- React、spa单页面、使用externals生成目录结构如下
├── .browserslistrc # postcss autofixer
├── .env.development # 环境变量，可在项目中 process.env.XXX
├── .env.production
├── .gitignore
├── dist # 构建产物
│ ├── chunk-vendors.js # 分包处理-基础包，react、react-dom、react-router-dom
│ ├── index.html
│ ├── index.js # 业务包
│ └── index_6a7ccc98.css
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│ └── index.html
├── mock # mock本地数据
├── src
│ ├── components
│ │ └── button
│ │ └── index.tsx
│ ├── declare.d.ts
│ ├── main.less
│ ├── main.tsx
│ ├── pages
│ │ ├── about
│ │ │ └── index.tsx
│ │ └── home
│ │ └── index.tsx
│ ├── router # 路由配置，支持后台管理layout类型
│ │ └── index.tsx
│ └── styles # 全局样式
│ └── normalize.less
└── wont.config.js- React、mpa单页面、使用externals生成目录结构如下
├── dist # build产物
│ ├── index.html
│ ├── index.js
│ └── index_0905e159.css
├── package-lock.json
├── package.json # 已在script上添加dev和build
├── postcss.config.js # 可在基础上添加postcss功能
├── public
│ └── index.html
├── mock # mock本地数据
├── src
│ └── pages
│ └── index
│ ├── index.less
│ └── index.tsx
└── wont.config.js # 配置文件-
wont.config.js，相关配置均在此处，可更改选项，重新dev或build即可 目前支持配置如下
module.exports = {
"framework": "React", // 必选 React-默认 Vue-暂未支持
"externals": true, // 是否启用script cdn接入 默认-true，react、react-dom将自动cdn引入
"mode": "spa", // 必选，spa-单页面（默认） mpa-多页面
mock: {
port: 3000, // 可指定mock端口，默认5678
}
}本地开发
wont-cli dev打包
wont-cli build