doly-cli 是一个包含 init dev build 的命令行工具,参考了 create-react-app,roadhog, umi 等优秀工具。
- 📦 开箱即用的 react 应用开发工具,内置 css-modules、babel、less、postcss、HMR 等
- 🚨 create-react-app 的体验
- 🐠 扩展 webpack 配置
- ✂️ mock
- ✨ 支持开发和构建不同 env 环境配置
- 🍰 支持 html/js/css/image 构建自定义目录
- doly-cli
- Contents
- 快速开始
- Mock
- 使用 public 目录
- 不同环境配置
- 配置
- mode
- context
- entry
- outputPath
- zip
- outputFilename
- outputChunkFilename
- publicPath
- hash
- ignoreMomentLocale
- manifest
- html
- image
- css
- cssInline
- disableCSSModules
- disableCSSSourceMap
- replace
- define
- externals
- extensions
- alias
- copy
- browserslist
- transpileDependencies
- optimization
- terserOptions
- devtool
- devServer
- mockFile
- proxy
- env
- 扩展配置
- 如何兼容 IE
# 全局安装 npm install doly-cli -g # 查看版本 doly -v # 初始化项目脚手架 doly init # 本地开发。代码编译并启动本地服务,env 默认 development 环境 doly dev [env] # 打包。env 默认 production 环境 doly build [env]
doly dev 支持 mock 功能,默认文件 mocker/index.js 中进行配置。参考 mocker-api
示例:
module.exports = { // 支持值为 Object 和 Array 'GET /api/users': { users: [1, 2] }, // GET POST 可省略 '/api/users/1': { id: 1 }, // 支持自定义函数,API 参考 express@4 'POST /api/users/create': (req, res) => { res.end('OK'); } };
我们约定 public 目录下的文件会在 dev 和 build 时被自动 copy 到输出目录(默认是 ./dist)下。所以可以在这里存放 favicon, iconfont, html 里引用的图片等。
通过 env 实现,env 除默认 development 和 production 外,可以任意配置。
doly dev [env] 本地开发中可以运行不同环境配置,默认 env 为 development 。
doly build [env]打包不同环境配置,默认 env 为 production 。
# 本地开发读取生产环境配置 doly dev production # 本地开发读取测试环境配置 doly dev test # 打包开发环境配置 doly build development # 打包测试环境配置 doly build test
即运行 env 对应环境配置项和默认配置项的合并配置。
doly.config.js
module.exports = { define: { APIURL: 'https://dev.example.com/' }, env: { test: { define: { APIURL: 'https://test.example.com/' } }, sit: { define: { APIURL: 'https://sit.example.com/' } }, production: { define: { APIURL: 'https://prod.example.com/' } } } };
PS: 本地运行生产环境配置时,如果有以下配置,需要做一些调整,调试完成后,记得改回去。
module.exports = { production: { // 改之前 // publicPath: 'https://example.com/xxx/xxx/', // outputFilename: 'res/j/[name].[chunkhash:8].js'; // outputChunkFilename: 'res/j/[name].[chunkhash:8].chunk.js'; // 改之后 publicPath: '/' // outputFilename: 'res/j/[name].[chunkhash:8].js'; // outputChunkFilename: 'res/j/[name].[chunkhash:8].chunk.js'; } };
doly 封装了 webpack 部分功能。如需配置,在项目根目录新建 doly.config.js 完成。如果是基于 init 的项目目录结构,并且没有资源文件的目录规则要求,可以零配置进行开发。
示例:
module.exports = { ... }
webpack 的 mode,除了 production 环境外,其他环境默认为 development。
支持设置其他环境使用 production,例如一个项目需要部署 sandbox 和 production 环境,同时又有不同自定义配置。
基础目录,相对当前执行目录的路径,用于从配置中解析入口起点和 loader。默认:
'src'
指定 webpack 入口文件,支持 glob 格式。默认:
entry: './src/app.{js,jsx,ts,tsx}';
如果是多页面多入口,请使用对象模式,并配置 optimization 的 splitChunks
entry: { bar: 'src/bar.js', foo: 'src/foo.js' }
又比如你希望把 src/pages 的文件作为入口。可以这样配:
entry: 'src/pages/*.js';
配置 webpack 的 output.publicPath 属性。默认:
outputPath: 'dist';
配置构建完成后生成 zip 文件,相对于当前项目根目录
示例:
zip: 'build/project.zip';
配置 webpack 的 output.filename 属性。如果设置该值,hash配置对该项无效,需自己配置文件名 hash。默认:
outputFilename: '[name].[chunkhash:8].js';
也可以自定义目录
outputFilename: 'res/j/[name].[chunkhash:8].js';
配置 webpack 的 output.chunkFilename 属性。如果设置该值,hash配置对该项无效,需自己配置文件名 hash。默认:
outputChunkFilename: '[name].[chunkhash:8].chunk.js';
也可以自定义目录
outputChunkFilename: 'res/j/[name].[chunkhash:8].chunk.js';
配置 webpack 的 output.publicPath 属性。默认:
publicPath: '/';
配置让构建资源文件名带 hash,通常会和 manifest 配合使用。如果单独设置了 outputFilename outputChunkFilename css.filename css.chunkFilename 则需要单独指定filename 的 hash。默认:
hash: true;
忽略 moment 的 locale 文件,用于减少尺寸。默认:
ignoreMomentLocale: false;
注意开启后,可能导致 antd 的日期组件月份显示英文
配置后会生成 manifest.json,option 传给 webpack-manifest-plugin。默认为空。
示例:
manifest: { basePath: 'http://www.example.com/' },
配置页面信息,option 传给 html-webpack-plugin。默认:
html: [ { template: 'src/index.html', // 指定要打包的html路径和文件名 filename: 'index.html' // 指定输出路径和文件名 } ];
配置图片 url-loader。默认:
image: { outputPath: 'images', // 图片输出地址,默认 images name: '[name].[hash:8].[ext]', // 文件名 limit: 1024*8 // 8kb内的图片转为base64 }
也可以自定义目录
image: { outputPath: 'res/i', // 图片输出地址,默认 images name: '[name].[hash:8].[ext]', // 文件名 limit: 1024*8 // 8kb内的图片转为base64 }
配置 mini-css-extract-plugin。如果设置 filename,hash配置对该项无效,需自己配置文件名 hash。如果 cssInline 为 true,该配置无效。默认:
css: { filename: '[name].[contenthash:8].css', chunkFilename: '[name].[contenthash:8].chunk.css' }
也可以自定义目录
css: { filename: 'res/c/[name].[contenthash:8].css', chunkFilename: 'res/c/[name].[contenthash:8].chunk.css' }
注意开发模式下,如果使用 hash 名称可能导致 HMR 失效
样式包含 js 中,用 style 进行加载。默认为 false
禁用 CSS Modules。默认 false
禁用 CSS 的 SourceMap 生成。默认 false
配置 string-replace-loader,替换js/jsx中的文本。例如 fis 的图片资源定位符 __uri,资源路径需改为相对路径。
示例:
replace: { search: '__uri', replace: 'require', flags: 'g' },
通过 webpack 的 DefinePlugin 传递给代码,值会自动做 JSON.stringify 处理。
示例:
define: { APIURL: 'http://www.example.com/'; }
配置 webpack 的externals属性。
例如,配置 react 和 react-dom 不打入代码
html:
<script src="https://unpkg.com/react@16.8.1/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16.8.1/umd/react-dom.production.min.js"></script>
doly.config.js 中:
externals: { react: 'window.React', react-dom: 'window.ReactDOM' }
配置 webpack 的 resolve.extensions 属性。自动解析确定的扩展。默认值为:'web.mjs', 'mjs', 'web.js', 'js', 'web.ts', 'ts', 'web.tsx', 'tsx', 'json', 'web.jsx','jsx'。配置之后会进行合并。
配置 webpack 的 resolve.alias 属性。
定义需要单纯做复制的文件列表,格式为数组,项的格式参考 copy-webpack-plugin 的配置。
配置 browserslist,同时作用于 babel-preset-env 和 autoprefixer。默认:
browserslist: ['> 1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9'];
自定义编译依赖模块。默认情况下只编译 src 目录下文件模块,不会编译 node_modules 下的模块,如果你依赖的第三方模块存在不兼容的新语法,请使用该配置。例如:
transpileDependencies: [ /node_modules\/react-virtualized-auto-sizer/ // 其他需要编译的模块 // ... ];
PS: 你可能需要运行
npx doly dev production来确认哪个模块存在不兼容语法。
配置 webpack 的 optimization。默认配置了 minimize/minimizer,配置之后会进行合并。如果需要进行代码拆分可以配置 splitChunks
配置 terser-webpack-plugin 的 terserOptions ,将会和默认配置项递归合并。
如部分场景需要在生产构建显示日志,配置如下:
terserOptions: { compress: { drop_console: false; } }
配置 webpack 的 devtool 属性。默认区分开发和生产环境:
非 production 环境:
devtool: 'cheap-module-source-map';
production 环境:
devtool: undefined;
配置mock文件。默认:
mockFile: 'mocker/index.js';
mocker/index.js 示例
export default { // 支持值为 Object 和 Array 'GET /api/users': { users: [1, 2] }, // GET POST 可省略 '/api/users/1': { id: 1 }, // 支持自定义函数,API 参考 express@4 'POST /api/users/create': (req, res) => { res.end('OK'); } };
本地服务代理配置,参考 webpack devserver.proxy
示例:
proxy: { '/app': { target: 'http://xxx/', changeOrigin: true, }, },
不同环境配置,如果 build 不是 production ,webpack mode 默认不设置为production(支持其他环境设置 mode 为 production)。
- 本地开发使用
doly dev [env],env默认development。 - 打包使用
doly build [env],env默认production。
扩展配置一样是在 doly.config.js 中进行配置, 如果有依赖扩展插件,需在项目安装插件
扩展 babel-loader 的 plugins
示例
项目中只引入
antd-mobile某个组件,可扩展babel-plugin-import插件。
- 安装
babel-plugin-import
npm install babel-plugin-import --save-dev
doly.config.js中配置
extraBabelPlugins: [['import', { libraryName: 'antd-mobile', style: true }]];
然后只需从 antd-mobile 引入模块即可,无需单独引入样式。
// babel-plugin-import 会帮助你加载 JS 和 CSS import { DatePicker } from 'antd-mobile';
扩展 babel-loader 的 presets
扩展 postcss-loader 的 plugins
示例
npm install postcss-pxtorem --save-dev
extraPostCSSPlugins: [ require('postcss-pxtorem')({ rootValue: 75, unitPrecision: 5, propList: ['*', '!border*'], selectorBlackList: [], replace: true, mediaQuery: false, minPixelValue: 12 }) ];
init的脚手架:simple和mobile支持 IE9,admin支持 IE11IE9/10/11
- 创建
utils/polyfill.js,引入core-js/stable、regenerator-runtime/runtime - 入口文件添加
utils/polyfill.js - 关闭开发服务的模块热替换,修改需手动刷新。建议在测试 IE 兼容时再关闭
安装 core-js、regenerator-runtime
npm install core-js regenerator-runtime
utils/polyfill.js
import 'core-js/stable'; import 'regenerator-runtime/runtime';
入口文件添加 utils/polyfill.js,并关闭开发服务的模块热替换。
在 doly.config.js 中配置:
entry: { app: ["./src/utils/polyfill", "./src/app.js"] }, // 调试IE时,热更新无效 devServer: { hot: false }