README
- drg-cli 前端工程构建工具
drg-cli 前端工程构建工具
drg-cli
致力于使用 React 技术栈以系统性、组件化、标准化的过程方法开发和维护企业级应用软件。确保前端开发人员能够快速在 React 生态中将各种基础工具以零配置的方式与企业级业务需求的开发平稳衔接,让研发人员更专注于开发业务逻辑上,同时提供灵活的配置,以适合不同类型和规模的企业级应用。
特性
- 开发环境默认允许跨域,方便与乾坤微前端集成时测试
- todo
- todo
- todo
- todo
- todo
快速开始
1、确保你的项目为以下结构
project
├── package.json
└── src
├── index.html
└── index.js
对于要构建的项目,这些文件必须以确切的文件名存在:
src/index.html
是 index 页面的模版src/index.js
是 index 页面的 javascript 入口
drg-cli
2、在项目中安装 yarn add drg-cli -D # 或者 npm install drg-cli --save-dev
3、添加 script 配置
- package.json 配置
{
"scripts": {
"dev": "drg-cli dev",
"build": "drg-cli build"
}
}
执行命令
yarn dev #或者 npm run dev
在本地构建 Node 开发服务器,脱离 nginx、apache 等后台服务的依赖,实时编译前端的各种资源,并且在开发过程中任何文件的更改,都会自动更新浏览器,实时查看修改效果。你还将在控制台中看到任何 lint 错误。
yarn build #或者 npm run build
将生产应用程序构建到 dist 文件夹。它能将 React 代码智能地打包为生产模式中并优化构建以获得最佳性能。构建文件将被压缩,文件名中将包含哈希。
构建多页应用
drg-cli
支持构建多页面应用。如果你开发的项目是多页应用,请在src/pages
以目录名存放每个页面内容。
project
├── package.json
└── src
├── pages
│ ├── demo1
│ │ ├── index.html
│ │ └── index.js
│ └── demo2
│ ├── index.html
│ └── index.js
├── index.html
└── index.js
配置文件 drg-cli
在项目根目录新建drg-cli.config.js
module.exports = {
html: {
/**
* 启用 preload
* 构建项目自动加入preload方案
*/
preload: true,
/**
* 启用 prefetch
* 构建项目自动加入prefetch方案
*/
prefetch: true,
},
/**
* -------------------------------
* 样式编译器配置
* -------------------------------
*/
style: {
/**
* css配置
* https://github.com/webpack-contrib/css-loader
*/
cssOptions: {},
/**
* less配置
* https://github.com/webpack-contrib/less-loader
*/
lessOptions: {},
/**
* sass配置
* https://github.com/webpack-contrib/sass-loader
*/
sassOptions: {},
/**
* stylus配置
* https://github.com/shama/stylus-loader
*/
stylusOptions: {},
/**
* style sourceMap
*/
sourceMap: false,
},
/**
* SVG symbol图标方案配置
* 配置参考:https://github.com/kisenka/svg-sprite-loader#configuration
*/
svgSprite: {
options: {
symbolId: 'icon-[name]', //symbolId和use使用的名称
},
},
/**
* eslint 配置
*/
eslint: {
available: true, //开启eslint
cache: true, //启用配置缓存,如果新配置不起作用请先设置为false
useEslintrc: false, //使用项目中eslintrc配置
extends: [], //默认使用的eslint规则
},
/**
* -------------------------------
* 路径配置
* -------------------------------
*/
paths: {
appPath: '.',
appSrc: 'src', //源码目录,非src目录中的代码不做编译
appBuild: 'dist', //生产目录
appPublic: 'public', //静态资源目录
appIndexHtml: 'src/index.html', //默认首页模板
appIndexJs: 'src/index', //默认首页脚本文件
appPages: 'src/pages', //多页面存放目录
svgIconPath: 'src/icons', //svg 图标存放目录
proxySetup: 'src/setupProxy.js', //proxy代理配置文件
appTypeDeclarations: 'src/react-app-env.d.ts', //ts环境变量配置文件
},
/**
* PWA的workbox-webpack-plugin配置
* More info see: https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin
*/
pwa: {
mode: 'GenerateSW', // GenerateSW or InjectManifest
options: {
clientsClaim: true,
exclude: [/\.map$/, /asset-manifest\.json$/],
importWorkboxFrom: 'cdn',
navigateFallback: '/index.html',
navigateFallbackBlacklist: [
// Exclude URLs starting with /_, as they're likely an API call
new RegExp('^/_'),
// Exclude any URLs whose last part seems to be a file extension
// as they're likely a resource and not a SPA route.
// URLs containing a "?" character won't be blacklisted as they're likely
// a route with query params (e.g. auth callbacks).
new RegExp('/[^/?]+\\.[^/]+