GCP-CLI

开发

安装

Node 版本要求

GCP CLI 1.x 需要 Node.js v12.x 或更高版本 (推荐 v14 以上)。可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

首次安装 

npm install -g @gcbp/gcp-cli
# 或者
yarn global add @gcbp/gcp-cli

注意

安装之前要确保已把 npm registry 设置为公司内网地址，如执行命令：npm set @gcbp:registry https://packages.glodon.com/artifactory/api/npm/npm-gcbp-private/，或者直接修改用户目录下.npmrc文件。

升级 

npm update -g @gcbp/gcp-cli
# 或者
yarn global upgrade --latest @gcbp/gcp-cli

指令 

"scripts": {
  "dev": "gcp dev --env dev",
  "build": "gcp build --env prod",
  "build:ts": "gcp build --env prod -t",
  "start": "gcp serve",
  "analyze": "gcp build --analyze",
  "dts": "gcp dts"
},

gcp init

基于 gcp 模板创建项目 目前可选模板:

  1. 低代码控件库
  2. 低代码插件库

开发中模板：

  1. Web端Vue多页应用模板
  2. 移动端Vue多页面应用模板
gcp init 
? 请输入项目：gcp-demo
? 请选择模板：（Use arrow keys）
> 低代码控件库
  低代码插件库

✔ cd gcp-demo && git init && npm install && npm run dev

gcp dev

  • -e, --env 部署环境 dev、test、prod 默认为 undefined
  • -t, --ts 生成 dts 文件 默认为 false
  • -ps, --progress 显示进度 默认为 true
  • -pr, --profile 统计模块消耗
  • -cl, --clearLog 清空日志 默认为 true
  • -wl, --wplogger 打印 webpack 配置 默认为 false,filename 为 输出 webpack 配置文件

gcp build

  • -e, --env 部署环境 dev、test、prod 默认为 undefined
  • -t, --ts 生成 dts 文件 默认为 false
  • -a, --analyze 生成分析报告 默认为 false
  • -h, --hot 是否使用热更新 默认启动
  • -o, --open 是否打开调试页面 默认不打开
  • -ps, --progress 显示进度 默认为 true
  • -pr, --profile 统计模块消耗
  • -cl, --clearLog 清空日志 默认为 true
  • -wl, --wplogger 打印 webpack 配置 默认为 false,filename 为 输出 webpack 配置文件

gcp serve

  • -cl, --clearLog 清空日志 默认为 true

gcp dts

根据 config.gcpShare.remote 自动同步所需类型

  • -p, --typingsPath 下载目录 默认为 src/gcpShareType

dotenv

环境变量配置

  • 根目录创建 .env[.env] 即可，根据上面提到的 --env 参数定制自己的配置环境, 如:

文件.env.dev

BASE_URL='https://cdn.developer.glodon.com'

命令中不传--env 参数时，使用根目录的.env文件

  • 使用配置 内容 process.env.[var] or esnext import.meta.env.[var] 如:
console.log(process.env.env); // dev ; 内置变量，从参数 --env 中取值
console.log(process.env.BASE_URL); // https://cdn.developer.glodon.com

Typescript

tsconfig.json 配置

  • @gcbp/gcp-cli 集成了 @gcbp/gcp-cli-tsconfig 与 Css Module 提示
  • 集成了 gcp 内置的资源 TS 类型
  • 设置方式如下:
{
	"extends": "@gcbp/gcp-cli/gcp-tsconfig.json",
	"compilerOptions": {
		"types": ["@gcbp/gcp-cli/client"],
		"baseUrl": "."
	},
	"include": ["src"]
}

类型生成

在gcp build下 如果是 ts 开发，会根据 expose 自动生成相应的 d.ts 到 dist/gcpShareTypes 里面

类型同步

gcp dts 会自动根据 gcpShare.remote 配置生成相应文件到 src/gcpShareTypes 如:

gcpShare: {
  name: 'microApp',
  remotes: {
    // gcp dts 会自动生成 @microHost.d.ts 到 `src/gcpShareTypes`
    '@microHost': `microHost@http://localhost:8001/gcp.js`,
  },
  exposes: {
    // gcp build 会自动生成类型到 dist/gcpShareTypes/index.d.ts
    './App': './src/App',
  },
}

共享模式

gcpshare 介绍

  • 实现 3 重共享模型

    • [基础库] -> [通用服务] -> [模块应用]

  • gcpshare 与 moduleFederation 配置可以 config.gcpShare 里面进行配置

  • shareLib 基于库共享模式

    • 可以进行 cdn 加载
    • ESM import
    • DLL 方式构建共享 [需自行实现]

  • shareLib 代替了 MF 里面的 shared 可以更好实现重型项目，大型团队的共享灵活性问题

注意

在 moduleFederation 配置中,如果项目需要导出模块供其它项目使用,除了在 gcpShare.exposes 中配置外,还需要在项目根目录中添加 bootstrap.js 或 bootstrap.ts 文件作为 webpack 导出模块的引导文件 为什么? 如何配置?

gcpshare 配置 

module.exports = {
	gcpShare: {
		name: "microApp",
		remotes: {
			"@microHost": `microHost@http://localhost:8001/gcp.js`,
		},
		exposes: {
			"./App": "./src/App",
		},
		// 实现 Module Feration 与 shareLib 只能保留一个
		shared: {
			vue: { requiredVersion: "^2.6.14" },
			vuex: { requiredVersion: "^3.6.2" },
		},
		// 实现 gcp share 的 三级共享模式 与 shared 只能保留一个,地址可以自行判断
		shareLib: {
			vue: "Vue@https://cdn.staticfile.org/vue/2.6.14/vue.js",
			vuex: "Vuex@https://cdn.staticfile.org/vuex/3.6.2/vuex.js",
		},
	},
};

多页面模式

entries 配置

多页面模式配置 gcp-config.js 如下:

module.exports = {
	// favicion 需要在 html里面配置
	html: { favicon: "src/favicon.ico" },
	// entries 会继承 Html配置
	// key为入口文件 基于 appSrc 默认 `src/` 的相对路径
	entries: {
		"index.ts": { title: "首页" },
		//可自定义htmlOptions参数 覆盖html
		"work/index.ts": { title: "作品", template: "src/work/index.html" },
		"info.tsx": { title: "介绍" },
	},
	// 相对于src目录下的多页目录, 默认 `pages`
	entriesDir: "pages",
};

共享模板

多入口会继承 gcpShare 的所有共享 需要自定义的话可以增加自定义模板 如

<!DOCTYPE html>
  <head>
  <!-- GCP inject css 可以屏蔽或者自定义这部分内容 -->
  <% for (let i in htmlWebpackPlugin.options.files.css) { %>
    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.files.css[i] %>" /><% } %>
    <!-- GCP inject js 可以屏蔽或者自定义这部分内容 -->
    <% for (let i in htmlWebpackPlugin.options.files.js) { %>
    <script src="<%= htmlWebpackPlugin.options.files.js[i] %>"></script><% } %>
  </head>

  <body>
    <div id="gcp-root"></div>
  </body>
</html>

库模式 [Beta]

已支持 各种模块 export 支持 IE 兼容，worker 模式下 需要手动复制 worker，inline 方式需要支持

build.lib 配置 

type FileNameType = (format: string) => string
export type LibModeType = {
  /**
   * 全局变量 用作 amd umd var window 等共享
   */
  name?: string
  /**
   *  入口文件 基于 AppSrc 目录 如 `src/index.js` 填写 `index.js` 即可
   * @default `index.js`
   */
  entry: string | string[]
  /**
   * fileName
   * @default [format]/[name].js 建议 format 为目录 避免不同格式代码混淆
   */
  fileName?: FileNameType | string
  /**
   * 输出格式 如 [umd,esm]
   * @default [umd]
   */
  formats: buildLibType[]
  /**
   * 提供额外的 全局变量 具体参考 https://webpack.docschina.org/configuration/externals/#root
   */
  external?: Configuration['externals']
  /**
   * 提供额外的 扩展格式支持 具体参考 https://webpack.docschina.org/configuration/resolve/#resolveextensions
   */
  extensions?: ResolveOptions['extensions']
}

package.json 配置 

{
	"name": "gcp-lib", // 没设置 build.lib.name 的情况下 默认生成类型名称 为 name
	"main": "dist/umd/gcp-lib.js", // umd 入口
	"module": "dist/esm/gcp-lib.js", // esm 入口
	"types": "dist/gcpShareTypes/lib.d.ts" // 类型文件入口
}

ESM 模式 [Beta]

已支持 MF 的 ESM 共享，热更存在 bug 问题

Browser 兼容

IE 浏览器

  • babel-polyfill

如果在编译产物时没有做额外的兼容处理，又想要在IE上运行时。 需要在核心代码执行前加载额外的polyfill

<!DOCTYPE html>
<html lang="en">
	<head>
		<script src="//yourhost/babel-polyfill.min.js"></script>
	</head>

	<body>
		<div id="gcp-root"></div>
	</body>
</html>

某些特性，如 Proxy。babel-polyfill 并不会兼容，需要业务侧自己做处理。 babel-polyfill 兼容特性见 [文档]

  • import GCP 模块链接出错
    • GCP 沿用了 webpack 的打包机制
    • 当你没有指定打包 publicPath 时, 会根据import.meta.url,currentScript等规则拼接子 js 的 url
    • 由于在 IE 上不支持currentScript，所以需要打进兼容 js，否则有可能会出现子 js url 错误问题
    • 参考链接：[介绍]

Q&A

使用 Windows 开发，编译过程中报错提示 "Access is denied"

  • A: 右键“以管理员身份打开”，重新执行命令即可。