基于typescript react webpack的前端生态
- 工程脚手架: create-empty-app empty-desgin 工程脚手架
- babel插件: babel-plugin-empty-import 解决自身组件及第三方模块全量导入的问
- webpack插件: empty-webpack-build-detail-plugin 对webpack的编译过程进行日志监控
- 静态资源服务: empty-server 一个简单的、零配置的命令行 http 服务器。它对于生产使用来说足够强大，但它足够简单且易于破解，可用于测试、本地开发和学习。
- empty工具库: empty-tool
1.针对不同的loader采用了多进程编译，指定精确处理的目录和排除的目录，并开启缓存 极大的加快了编译速度。
2.使用webpack.DllReferencePlugin 根据环境自动 提取固定资源，加快编译与打包速度
3.区分生产环境和开发环境。
4.启用cssmodule 默认使用postcss + postcss-cssnext，内置处理浏览器前缀。
5.启用 tree shaking
6.启用 scope hoisting
7.Babel配有transform-runtime让代码更优化
8.更改文件,防缓存的hash规则
9.把小图片转成base64码
10.快速编译，热更新，自动刷新
11.resolve.modules 优化模块查找路径
12.optimization splitChunks 合并公共代码
13.单独抽离css文件
14.压缩css js 文件。
15.大文件跳过编译 直接拷贝
16.自定义loader 优化文件引入
17.自定义plugin 输出编译产出
18.nodemon 监听配置文件改动
19.系统级的错误提示
20.端口冲突自动切换
21.自动生成编译日志
22.编译结果可视化
23.本地端口运行打包后项目
24.脚手架 配置化
├── build # webpack 配置目录
│ ├── loaders # 自定义loader目录
│ ├── plugins # 自定义plugin目录
│ ├── template # html模版目录
├── config # 系统配置目录
├── dist # 打包资源
├── log # 日志目录
├── scripts # 运行脚本
├── src # 源码目录
├── static # 静态资路径(直接拷贝的文件)
├── typings # ts类型声明文件
├── .babelrc # babel配置(预设和插件)
├── .eslintrc.js # eslint配置
├── package.json # 项目描述
├── postcss.config.js # postcss配置
└── tsconfig.json # ts配置
- 为了把保证项目正常运行，请自行更新相关环境。
- 首先clone项目
$ git clone https://github.com/FreemenL/empty-desgin.git
$ cd empty-desgin- 下载依赖
-
请确保你的环境配置完成，然后就可以开始以下步骤
$ npm install -g cnpm --registry=https://registry.npm.taobao.org $ cnpm i $ npm start # Compile and launch
开发过程中，你用得最多的会是npm start，但是这里还有很多其它的处理：
npm run <script> |
Explain |
|---|---|
| start | 初始化启动项目（生成Dll文件并启动服务） |
| build | 打包 |
| ls | 将dist目录在本地8080端口运行 |
module.exports = {
// 模式 dev | run 区别:dev 会开启配置文件监听 run 不会
pattern: 'run',
// 系统路径配置 相对命令行启动目录
systemPath: {
// 入口文件
appIndex: 'src/index',
// ts配置文件
appTsConfig: 'config/tsconfig',
// webpack ts配置
webpackTsConfig: 'config/tsconfig-for-webpack-config',
// 动态链接库
appdllLibrary: '_dllLibrary_',
// title图标
appFavicon: 'src/public/favicon',
// 依赖包路径
appNodeModules: 'node_modules',
// 日志目录
appLog: 'log',
// 源码目录
appSrc: 'src',
// 打包路径
appBuild: 'dist',
// 配置文件目录
appConfig: ['build', 'config'],
// 自定义loader目录
appLoader: 'build/loaders',
// 自定义 依赖包路径下需要awesome-typescript-loader 处理的文件目录
appTsLoader: ['node_modules/[email protected]@emptyd', 'node_modules/[email protected]@freetool'],
// 静态资源路径 存放较大文件 该目录下存放文件会被 CopyWebpackPlugin 直接复制到打包后dist/static 路径
appStatic: 'static',
// node_modules 下不会被cssmodule 处理的文件路径
appExcludeCssModule: ['antd', 'normalize.css', 'rc-texty', 'nprogress', 'braft-editor', 'rc-queue-anim', 'viewerjs'],
// 路径别名相对源码目录
appPathAlias: {
'@src': '',
'@components': `components`,
'@actions': `store/actions`,
'@constants': `store/constants`,
'@pages': `pages`,
'@reducers': `store/reducers`,
'@router': `router`,
'@store': `store`,
'@public': `public`,
'@utils': `utils`,
'@service': `service`
}
},
// 系统常量
systemConstant: {
// 系统名称
title: 'emptyd系统',
// html模板文件 路径相对命令行启动目录
htmlTemplate: './build/template/index.html'
},
// 开发环境配置
devConfig: {
// 本地服务端口 支持同时启动多个服务
localServerPort: 8091,
// 代理配置
// proxyTable: {
// '/**': {
// target: 'http://193.112.220.100',
// changeOrigin: true,
// secure: true
// }
// }
},
// 是否生成编译报告 为true时候可在 127.0.0.1:8888查看编译结果
bundleAnalyzerReport: false,
// 动态连接库中排除
dllLibraryExclude: ['freetool','antd','antd-mobile', 'normalize.css'],
// 是否开启编译缓存
onCompiltionCache: false,
// 是否开启代码检查
onLint: true,
//上传服务器配置
remoteServer:{
uploadFile:'./dist/**',
sshConfig:{
remotePath:'/root/nginx_szcg/website/zhifa/dist',
ssh: { // 正式
host: "129.139.254.333",
port: 22,
username: 'root',
password: 'xxxxxxxxxxxxx'
},
commands: [
// 删除现有文件
`rm -rf /root/nginx_szcg/website/zhifa/dist`
]
}
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent