细节

npm audit镜像

修补命令的作用

# 扫描项目漏洞把不安全的依赖项自动更新到兼容性版本
npm audit fix
# 在不修改 node_modules 的情况下执行 audit fix，仍然会更改 pkglock
npm audit fix --package-lock-only
# 跳过更新 devDependencies
npm audit fix --only=prod
# 强制执行 audit fix 安装最新的依赖项（toplevel）
npm audit fix --force
# 单纯的获取 audit fix 会做的事，并以 json 格式输出。
npm audit fix --dry-run --json
# 获取详情
npm audit
# 以 JSON 格式打印报告
npm audit --json

.umirc.js配置

www.cnblogs.com：添加配置式路由——添加路由信息到路由表

.umirc.js                      // umi 配置，同 config/config.js，二选一

#umi配置细节

在.umi.js里配置：

export default {
  plugins: [
    ['umi-plugin-react', {
      dva: {
        immer: true,
      },
      antd: true,
      routes: {
        exclude: [/models\//],
      },
      polyfills: ['ie9'],
      locale: {},
      library: 'react',
      dynamicImport: {
        webpackChunkName: true,
        loadingComponent: './components/Loading.js',
      },
      dll: {
        exclude: [],
      },
      hardSource: true,
      pwa: true,
      hd: true,
      fastClick: true,
      title: 'default title',
      chunks: ['vendor', 'umi'],
      scripts: [
        { src: 'http://cdn/a.js' },
        { src: '<%= PUBLIC_PATH %>a.js' },
        { content: `alert('a');` },
      ],
      headScripts: [],
      metas: [
        { charset: 'utf-8' },
      ],
      links: [
        { rel: 'stylesheet', href: 'http://cdn/a.css' },
      ],
    }],
  ],
};

#配置项

所有功能默认关闭，有真值配置才会开启。

#dva

• 类型：Object

基于 umi-plugin-dva 实现，功能详见 和 dva 一起用。
配置项包含：

• immer,是否启用 dva-immer
• dynamicImport,是否启用按需加载，配置项同 #dynamicImport，并且如果在 #dynamicImport 有配置，配置项会继承到 dva 中
• hmr是否启用 dva 的 hmr

WARNING
如果项目中有 dva 依赖，则优先使用项目中的依赖。

#antd

• 类型：Boolean

启用后自动配置 babel-plugin-import 实现 antd, antd-mobile 和 antd-pro 的按需编译，并且内置 antd, antd-mobile 依赖，无需手动在项目中安装。
WARNING
如果项目中有 antd 或者 antd-mobile 依赖，则优先使用项目中的依赖。

#routes

• 类型：Object

基于 umi-plugin-routes 实现，用于批量修改路由。
配置项包含：

• exclude,值为Array(RegExp)，用于忽略某些路由，比如使用 dva 后，通常需要忽略 models、components、services 等目录

• upgrate, 值为Function，用于更新路由

  #polyfills (已废弃)

• 类型:Array(String)

  请改用 config.targets

基于 umi-plugin-polyfills 实现，用于加各种补丁。
目前支持配置[‘ie9’]、[‘ie10’]、[‘ie11’] ，实现一键兼容。

#locale

• 类型：Object

基于 umi-plugin-locale 和 react-intl 实现，用于解决 i18n 问题。
配置项包含：

• default :’zh-CN’,// default zh-CN
• baseNavigator:true// default true, when it is true, will use navigator.language overwrite default

• antd:true // use antd, default is true

  #library

• 类型：String

可能切换底层库为 preact 或 react。

#dynamicImport

• 类型：Object

实现路由级的动态加载（code splitting），可按需指定哪一级的按需加载。
配置项包含：

• webpackChunkName,是否通过 webpackChunkName 实现有意义的异步文件名
• loadingComponent,指定加载时的组件路径

• level,指定按需加载的路由等级

  #dll

• 类型：Object

通过 webpack 的 dll 插件预打包一份 dll 文件来达到二次启动提速的目的。
配置项包含：

• include

• exclude

  #hardSource

• 类型：Boolean

通过 hard-source-webpack-plugin 开启 webpack 缓存，二次启动时间减少 80%。推荐非 windows 电脑使用，windows 下由于大文件 IO 比较慢，可自行决定是否启用。

#pwa

• 类型：Object

开启 PWA 相关功能，包括：

• 生成manifest.json，对于 WebManifest 中引用的icons图标，建议放在项目根目录public/文件夹下，最终会被直接拷贝到构建目录中
• 在PRODUCTION 模式下生成 Service Worker

配置项包含：

• manifestOption类型：Object，包含如下属性:
  • srcPath manifest 的文件路径，类型:String，默认值为src/mainfest.json（如果src不存在，为项目根目录）
• workboxPluginMode Workbox 模式，类型:String，默认值为GeneraSW即生成全新 Service Worker ；也可选填injectManifest即向已有 Service Worker 注入代码，适合需要配置复杂缓存规则的场景
• qorkboxOption Workbox配置对象，其中部分重要属性如下:
  • swSrc类型：String，默认值为src/manifest.json ，只有选择了InjectManisest 模式才需要配置
  • swDest类型：String，最终输出的文件名，默认值为service-worker.js 或者等于swSrc中的文件名
  • importWorkboxFrom类型：String，默认从 Google CDN 加载 Workbox 代码，可选值’local’ 适合国内无法访问的环境

更多关于 Workbox 的使用可以参考官方文档。
一个完整示例如下：

// .umirc.js or config/config.js
export default {
  pwa: {
    manifestOptions: {
      srcPath: 'path/to/manifest.webmanifest'
    },
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      importWorkboxFrom: 'local',
      swSrc: 'path/to/service-worker.js',
      swDest: 'my-dest-sw.js'
    }
  }
}

当 Service Worker 发生更新以及网络断开时，会触发相应的 CustomEvent。 例如当 Service Worker 完成更新时，通常应用会引导用户手动刷新页面，在组件中可以监听 sw.updated 事件：

window.addEventListener('sw.updated', () => {
  // 弹出提示，引导用户刷新页面
});

另外，当网络环境发生改变时，也可以给予用户显式反馈：

window.addEventListener('sw.offline', () => {
  // 置灰某些组件
});

#hd

• 类型：Boolean

开启高清方案。

#fastClick

• 类型：Boolean

启用 fastClick。

#title

• 类型：String/Object

开启 title 插件，设置 HTML title：
配置项包含：

• defaultTitle:‘默认标题’,// 必填，当配置项为 String 时直接配置项作为 defaultTitle
• format:’{parent}{separator}{current]’ ,// default {parent}{separator}{current}, title format
• separator, // default ‘ - ‘
• useLocale:true,// default false，是否使用locale做多语言支持。如果选true，则会通过配置的title属性去找locales/*.js找对应文字

当 title 插件开启后你可以在 routes 配置或者 pages 下的页面组件中配置 title。
比如使用配置式路由的时候如下配置：

// .umirc.js or config/config.js
export default {
  routes: [{
    path: '/testpage',
    component: './testpage',
    title: 'test page',
  }],
}

使用约定式路由的时候则直接在页面组件中配置：

/**
 * title: test page
 */
export default () => {
  return <div>testpage</div>;
}

在约定式路由里，注释必须写在文件头，否则将不被识别

#自定义模板document.ejs

如果你使用了自定的src/pages/document.ejs，你需要在里面加入入，以确保title.defaultTitle能正常被注入到生成的index.html的里

#chunks

• 类型：Array(String)

默认是 [‘umi’]，可修改，比如做了 vendors 依赖提取之后，会需要在 umi.js 之前加载 vendors.js
比如如下配置：

// .umirc.js or config/config.js
export default {
  chainWebpack: function (config, { webpack }) {
    config.merge({
      optimization: {
        minimize: true,
        splitChunks: {
          chunks: 'all',
          minSize: 30000,
          minChunks: 3,
          automaticNameDelimiter: '.',
          cacheGroups: {
            vendor: {
              name: 'vendors',
              test({ resource }) {
                return /[\\/]node_modules[\\/]/.test(resource);
              },
              priority: 10,
            },
          },
        },
      }
    });
  },
  plugins: [
    ['umi-plugin-react', {
        chunks: ['vendors', 'umi']
    }]
}

#scripts

• 类型：Array(Object)

放在里，在 umi.js 之后，可使用 <%= PUBLIC_PATH %> 指向 publicPath

#headScripts

• 类型：Array(Object)

放在 里，在 umi.js 之前，可使用 <%= PUBLIC_PATH %> 指向 publicPath

#metas

• 类型：Array(Object)

  #links

• 类型：Array(Object)

可使用 <%= PUBLIC_PATH %> 指向 publicPath

connent导致未定义

TypeError: Cannot read property ‘routerData’ of undefined
由于content连接是modal和component，程序中没有modal，编译找不到！！！
添加了modal，编译成功

export default connect(({ menu: menuModel }) => ({
  routerData: menuModel.routerData,
}))(AuthComponent);

umi整体布局混乱

antd是前端组件库，由于在.umirc.js中设置为false，未能引用组件，造成的布局混乱—-antd:true

export default {
  treeShaking: true,
  plugins: [
    // ref: https://umijs.org/plugin/umi-plugin-react.html
    ['umi-plugin-react', {
      antd: true,
      dva: true,
      dynamicImport: false,
      title: 'proumi',
      dll: false,
      routes: {
        exclude: [
          /components\//,
        ],
      },
    }],
  ],}

LocalProvide国际化

ant.design/components/locale-provider-cn：LocalProvide国际化

locales国际化模版引用

umijs.org/plugin/umi-plugin-react：国际化模版引用
问题1、UI页面无法将 id正常显示为中文
问题2、引用的Dashboard无法显示
在locales中找到了两个的内容，尝试如何引用却失败
在umijs.org/plugin/umi-plugin-react：国际化模版中找到了答案，引用了locales，还是无法显示，然后将dva修改后，成功了

// ref: https://umijs.org/config/
export default {
  treeShaking: true,
  plugins: [
    // ref: https://umijs.org/plugin/umi-plugin-react.html  dva:true dynamixImport:true
    ['umi-plugin-react', {
      antd: true,
      dva: {
        immer: true,
      },
      dynamicImport: {
        webpackChunkName: true,
        loadingComponent: './components/Loading.js',
      },
      title: 'proumi',
      dll: {
        exclude: [],
      },
      locale: {},
      library: 'react',
      hardSource: true,
      pwa: true,
      hd: true,
      fastClick: true,
      title: 'default title',
      routes: {
        exclude: [
          /components\//,
        ],
      },
    }],
  ],
}

hd:高清显示

umijs.org/plugin/umi-plugin-react：开启高清
楼上的国际化模版引用成功，但是比较大，是因为使用了hd,删除后得到成功，
（疑问：尝试了 hd:false 还是编译错误）
疑问解决：和删除结果一样

.concat传值为空

.concat是fotmatMessage的方法，fotmatMessage是在locale中引用的，在.umirc.js或config.js中引用locale得到了解决

vsCode设置问题

jianshu.com/p：VSCode中”experimentalDecorators”设置无效
.jianshu.com/p/：VS Code experimentalDecorators 问题