@doctorwork/one-plugin
v1.0.1
Published
### 静态资源管理系统
Downloads
10
Keywords
Readme
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: ""
}
}
}
功能点:
- 给 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>
- 在 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>
- 添加 APP_CONFIG 注入的 devServer 中间件,并提供一个单独的 chainwebpack 方法,可功能其他框架调用
- 获取 process.env 中 以 APPCONFIG 开头的环境变量,获取 PUBLIC_URL 环境变量
- 将第一部中的环境变量注入到 标签中
<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: 线上
- 其他: 测试