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 构建自定义目录
# 全局安装
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 = {
...
}索引：
- 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
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-devdoly.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-devextraPostCSSPlugins: [
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-runtimeutils/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
}