@hunliji/cli-service NPM

xi-cli-service

CLI 服务

概述

在一个 XI CLI 项目中，@xi/cli-service 安装了一个名为 xi-cli-service 的命令。你可以在 npm scripts 中以 xi-cli-service、或者从终端中以 ./node_modules/.bin/xi-cli-service 访问这个命令。

这是你使用默认项目的 package.json：

{
  "scripts": {
    "serve": "xi-cli-service serve",
    "build": "xi-cli-service build"
  }
}

环境变量和模式

你可以替换你的项目根目录中的下列文件来指定环境变量：

模式 mode 可以指定为 production 或 development

.env                # 在所有的环境中被载入
.env.[mode]         # 只在指定的模式中被载入

注意：环境变量的指定要以 XI_APP_ 开头才会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。

环境变量示例

假设我们有一个应用包含以下 .env 文件：

XI_APP_NAME = example

你可以在应用的代码中这样访问它们：

console.log(process.env.XI_APP_NAME) // example

注意：接口环境在应用中通过 process.env.XI_APP_ENV 来获取，process.env.XI_APP_ENV支持类型：

dev 测试环境
pre 预发环境
prod 生产环境

打包环境配置

为了在 CI/CD（Jenkins）能直接执行 shell，可以通过如下配置接口环境和相关页面：

// web项目
xi-cli-service serve env=prod
// wap或site项目
xi-cli-service serve env=prod page=xxxx

配置参考

xi.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @xi/cli-service 自动加载。

这个文件应该导出一个包含了选项的对象：

// xi.config.js
module.exports = {
  // 选项...
}

type

Type: web | wap | site

项目模板类型。默认生成，不需要改动。

publicPath

Type: string
Default: ./

部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。

devServer

Type: Object

所有 webpack-dev-server 的选项都支持。

configureWebpack

Type: Object

webpack 额外配置，通过 webpack-merge 合并到最终的配置中

更多细节可查阅：webpack。

resolve.alias

这不是一个配置参数，脚手架没有单独的 alias 配置参数，

脚手架默认读取 tsconfig.json 中的 compilerOptions.paths 字段将路径添加到 resolve.alias。如果不在 tsconfig.json 中配置，可以通过 configureWebpack 配置项配置。

babelPlugins

Type: Array

babel config 中的 plugins 配置。

更多细节可查阅：babel。

openBundleAnalyzer

Type: boolean
Default: false

打包完后自动打开 bundle 分析器

externals

Type: Object
Example: { react: { name: 'React', cdn: '//xxx.com/react.js' } }

配置 webpack 配置中 externals

更多细节可查阅：externals。

mergeExternals

Type: boolean
Default: true

是否将传进来的 externals 和默认的 externals 合并

默认 externals ：

{
  react: {
    name: 'React',
    cdn: '//s.haicaoyun.com/react-16.13.1.production.min.js',
  },
  'react-dom': {
    name: 'ReactDOM',
    cdn: '//s.haicaoyun.com/react-dom-16.13.1.production.min.js?t=4rCjKf',
  },
  'react-router-dom': {
    name: 'ReactRouterDOM',
    cdn: '//s.haicaoyun.com/react-router-dom-5.2.0.min.js',
  },
  axios: {
    name: 'axios',
    cdn: '//s.haicaoyun.com/axios-0.19.2.min.js',
  },
}