命令行工具
umi build
编译构建 web 产物。通常需要针对部署环境,做特定的配置和环境变量修改。相关详情,请查阅部署。
$ umi build
✔ Webpack
Compiled successfully in 5.54s
DONE Compiled successfully in 5547ms
Build success.
✨ Done in 9.77s.
默认产物输出到项目的 dist
文件夹,你可以通过修改配置 outputPath
指定产物输出目录。默认编译时会将 publish
文件夹内的所有文件,原样拷贝到 dist
目录,如果你不需要这个特性,可以通过配置 chainWebpack
来删除它。
export default {
chainWebpack(memo, { env, webpack }) {
// 删除 umi 内置插件
memo.plugins.delete('copy');
}
}
注意:如果
publish
里面存在产物同名文件,如index.html
,将会导致产物文件被覆盖。
umi dev
启动本地开发服务器进行项目的开发调试
$ umi dev
启动在浏览器中运行的开发服务器,并监视源文件变化,自动热加载。
默认使用 8000
端口,如果 8000
端口被占用,将会使用 8001
端口,以此类推。你可以通过设置环境变量 PORT
来指定开发端口号。更多环境变量配置,请查阅环境变量。
umi dev
Starting the development server...
✔ Webpack
Compiled successfully in 2.27s
DONE Compiled successfully in 2276ms
App running at:
- Local: http://localhost:8000 (copied to clipboard)
- Network: http://192.168.50.236:8000
开启开发服务还会同时提供一个 Network 的链接,你可以在能访问到你当前运行设备的其他设备中预览页面。
注意:如果是在开启了VPN,或者虚拟机等复杂的网络环境中,这个地址很可能会错误。你可以通过访问你真实可用
ip
的对应端口号来访问开发页面。
umi generate
内置的生成器功能,内置的类型有 page
,用于生成最简页面。支持别名调用 umi g
。
$ umi generate <type> <name> [options]
这个命令支持扩展,通过 api.registerGenerator
注册,你可以通过插件来实现自己常用的生成器。
import { Generator, IApi } from 'umi';
const createPagesGenerator = function ({ api }: { api: IApi }) {
return class PageGenerator extends Generator {
constructor(opts: any) {
super(opts);
}
async writing() {}
};
}
api.registerGenerator({
key: 'pages',
Generator: createPageGenerator({ api }),
});
umi generate page pageName
umi generate page pageName --typescript
umi generate page pageName --less
更多使用类型和参数,请查阅提供生成器扩展的插件的文档。
umi plugin
快速查看当前项目使用到的所有的 umi
插件。
$ umi plugin <type> [options]
当前支持的 type
是 list
,可选参数 key
。
$ umi plugin list
Plugins:
- @umijs/preset-built-in (preset)
- ./node_modules/umi/lib/plugins/umiAlias
✨ Done in 2.27s.
$ umi plugin list --key
Plugins:
- @umijs/preset-built-in [key: builtIn] (preset)
- ./node_modules/umi/lib/plugins/umiAlias [key: builtIn]
✨ Done in 2.27s.
umi help
umi 命令行的简易帮助文档。
$ umi help <command>
umi version
查看当前使用的 umi 的版本号,可以使用别名 -v
调用。
$ umi version
$ umi -v
umi webpack
查看 umi 使用的 webpack 配置。
$ umi webpack [options]
参数,
可选参数 | 说明 |
---|---|
rules | 查看 webpack.module.rules 配置详情 |
rule=[name] | 查看 webpack.module.rules 中某个规则的配置详情 |
plugins | 查看 webpack.plugins 配置详情 |
plugin=[name] | 查看 webpack.plugins 中某个插件的配置详情 |
示例,
$ umi webpack
{
mode: 'development',
devtool: 'cheap-module-source-map',
node:{ },
output:{ },
resolve:{ },
module:{
rules:[ ]
},
plugins:[ ],
entry:{ }
}
$ umi webpack --rules
[
'js',
'ts-in-node_modules',
'js-in-node_modules',
'images',
'svg',
'fonts',
'plaintext',
'css',
'less'
]
$ umi webpack --rule=js
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: [ 'xx/umi' ],
exclude: [ /node_modules/ ],
use:[
{
loader:'xx/babel-loader/lib/index.js',
options: [Object]
}
]
}
$ umi webpack --plugins
[
'extract-css',
'define',
'progress',
'copy',
'friendly-error',
'hmr'
]
$ umi webpack --plugin=extract-css
MiniCssExtractPlugin {
options:{
filename: '[name].css',
moduleFilename: [Function: moduleFilename],
ignoreOrder: true,
chunkFilename: '[name].chunk.css'
}
}