@doctorwork/one-plugin

APP PLUGIN

静态资源管理系统

one plugin 插件支持自动插入 One Admin SDK.

安装依赖

// 正式环境
npm install @doctorwork/one-plugin -D

使用

webpack

const OnePlugin = require("@doctorwork/one-plugin").webpack;

// webpack
// 当前项目中没有使用 html-webpack-plugin
new OnePlugin();

// 当前项目中有使用 html-webpack-plugin
const HtmlWebpackPlugin = require("html-webpack-plugin");
new OnePlugin({
  base: HtmlWebpackPlugin,
});

webpack-chain

const OnePlugin = require("@doctorwork/one-plugin").webpack;

// webpack-chain
// 当前项目中没有使用 html-webpack-plugin
config.plugin("@doctorwork/one-plugin").use(OnePlugin);

// 当前项目中有使用 html-webpack-plugin
config
  .plugin("@doctorwork/one-plugin")
  .use(OnePlugin, [{ base: HtmlWebpackPlugin }]);

本地测试环境

授权模式下对应的业务环境可以通过环境变量 APP_ENV 来对应当前需要测试的环境

APP_ENV=qa

默认使用线上环境 SDK，也可以通过配置环境变量 CDN 来使用测试环境

CDN=https://lib.xingren.com

UMI

https://umijs.org/plugins/api https://umijs.org/config#plugins

插件选项：

{
    analytic: {
        gio: "",
        ss: {
          project: "",
          token: ""
        }
    }
}

功能点：

1. 给 script 标签添加 class="app-script", 给 link 标签添加 class "app-style"，可以通过 script-ext-html-webpack-plugin 实现， 如下

script 和 link 需要是 编译后生成的标签

<link src="app.css" class="app-style" ></link>


<script src="/runtime.js" class="app-script" /></script>
<script src="/bundle.js" class="app-script" /></script>

2. 在 head 中插入 growingio 脚本, 脚本内容，id 通过配置中的 analytic.gio 获取(配置存在是插入)

https://docs.growingio.com/v3/developer-manual/sdkintegrated/web-js-sdk/latest-jssdk

<script type='text/javascript'>
!function(e,t,n,g,i){e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},n=t.createElement("script"),tag=t.getElementsByTagName("script")[0],n.async=1,n.src=('https:'==document.location.protocol?'https://':'http://')+g,tag.parentNode.insertBefore(n,tag)}(window,document,"script","assets.giocdn.com/2.1/gio.js","gio");
  gio('init', '${config.analytic.gio}', {});
  gio('send');
</script>

3. 添加 APP_CONFIG 注入的 devServer 中间件，并提供一个单独的 chainwebpack 方法，可功能其他框架调用

• 获取 process.env 中 以 APPCONFIG 开头的环境变量，获取 PUBLIC_URL 环境变量
• 将第一部中的环境变量注入到 <script id="app-config"></script>标签中

<script id="app-config">
  window.publicPath = ${process.env.PUBLIC_URL || "/"};
  window.APP_CONFIG = {
    APP_CONFIG_URL: "/url",
    APP_CONFIG_APPID: "wx123"
    ....
  }
</script>

REMAX

埋点配置

APP_CONFIG_API_ENV 变量切换项目

• prod: 线上
• 其他: 测试