scrm-loader v1.0.2
scrm-loader
scrm-loader 主要包括三个 webpack loader:
- element-batch-loader : 支持对所有基于 element 库二次开发的组件库进行按需导入语句插入,代码中直接按照cdn的方式使用组件,loader 自动补全 import 语句和 components 注册代码;
- vant-loader : 支持自动补全 vant 组件库按需导入语句插入,代码中直接按照cdn的方式使用组件;loader 自动补全 import 语句和 components 注册代码;
- validate-loader : 支持对指定的库进行检查,如果发现代码中对这些库有全局引入,会报错提示;
开始使用
安装
npm install --save-dev scrm-loader --registry http://npm.idc7x24.cn
element-batch-loader
element-batch-loader 仅仅是补充了 element 组件库的按需导入语句,真正实现打包优化还需要配合 babel-plugin-component 插件,因此配置分两步:
第一步:配置 babel-plugin-component
插件。具体使用方式请参考 babel-plugin-component
也可以直接参考 elementUI 官方的 按需引入 文档
第二步:配置 element-batch-loader
,这里以 vue-cli 为例:
// vue.config.js
module.exports = {
// ...
chainWebpack: config => {
config.module
.rule('vue')
.use('modesignLoader')
.loader('scrm-loader/dist/element-batch-loader.js')
.options({
nodeModulesPath: resolve('node_modules'),
libraries: [
{
libraryName: 'modesign-ui',
tagPrefix: 'el',
ignoreComponents: ['Loading', 'Tooltip']
}, {
libraryName: 'modesign-qw-ui',
tagPrefix: 'el'
}
]
})
.end()
}
// ...
}
options 参数说明
参数名 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
nodeModulesPath | string | 无 | 否 | node_modules 的绝对路径 |
libraries | array<libraryObject> | 无 | 是 | 需要按需引入的组件库配置 |
提示:
element-batch-loader
只对vue文件进行处理,如果还需要使用组件库中的指令、过滤器等功能需要再额外引入注意: 这里之所以需要填写 nodeModulesPath 是为了适应现在企微项目结构,因为现在的企微项目里基础组件和业务组件都是以
<el-
开头的,因此无法通过前缀来确定组件是来自基础组件还是业务组件,所以需要通过 nodeModulesPath 来找到对应库的导出文件区分,如果你的项目里面没有这个问题,可以不用填写 nodeModulesPath,直接通过 tagPrefix 来区分即可。
libraryObject 参数说明
参数名 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
libraryName | string | 无 | 是 | 组件库的名称 |
tagPrefix | string | 无 | 是 | 组件库的标签前缀 |
ignoreComponents | array<string> | 无 | 否 | 需要忽略的组件名称,有些组件已经全局注册,那么loader的时候就可以忽略掉 |
vant-loader
vant-loader 仅仅是补充了 vant 组件库的按需导入语句,真正实现打包优化还需要配合 babel-plugin-import 插件,因此使用分两部:
第一步:配置 babel-plugin-import
插件。具体使用方式请参考 babel-plugin-import
也可以直接参考 vant 官方的 按需引入 文档
第二步:配置 vant-loader
,这里以 webpack 配置为例:
// webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: "vue-loader",
options: { ... },
},
{
loader: "scrm-loader/dist/vant-loader.js",
}
],
},
]
}
// ...
}
提示:
vant-loader
只对vue文件进行处理,如果还需要使用组件库中的指令、过滤器等功能需要再额外引入注意: 在 webpack.config.js 中配置的时候,一定要把
vant-loader
放在vue-loader
之后,因为vant-loader
是直接修改 vue 代码的,而这些修改必须在交给 vue-loader 之前处理好。webpack
加载loader
是按从右至左,从下至上的顺序加载的,因此vant-loader
必须配置vue-loader
之后。
validate-loader
validate-loader 可以针对指定的库名称对代码进行检查,如果发现代码中有全局引入的组件,会报错提示;
下面以webpack配置为例:
// webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /\.vue$/,
use: [
...
{
loader: "scrm-loader/dist/validate-loader.js",
options: {
libraries: ["modesign-ui", "vant", {
name: "echarts",
message: "echarts不支持全局导入"
}]
}
}
],
},
{
test: /\.js$/,
use: [
...
{
loader: "scrm-loader/dist/validate-loader.js",
options: {
libraries: ["modesign-ui", "vant", {
name: "echarts",
message: "echarts不支持全局导入"
}]
}
}
],
},
]
}
// ...
}
以 modesign-ui
为例,下面的全局代码均会报错:
import MODESIGNUI from 'modesign-ui'
import * as MODESIGNUI from 'modesign-ui'
Vue.use(MODESIGNUI)
options 参数说明
参数名 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
libraries | string | array<libraryObject> | 无 | 是 | 需要检查的组件库配置 |
libraryObject 参数说明
参数名 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
name | string | 无 | 是 | 组件库的名称 |
message | string | 无 | 否 | 自定义错误提示信息,如果不填写则使用默认提示信息 |
使用建议
虽然我们尽可能全面的对代码做了测试。但水平有限,难免疏漏,如果你在使用过程中遇到问题可以先将冗余注释代码删除然后再试,因为有些注释可能会影响我们对组件引入的判断。另外删除无用的代码注释也是比较好的编码实践 冗余的注释不仅影响代码阅读也会拖慢打包速度~
如果问题依然无法解决,可以联系 xiaohui.xu@marketingforce.com ,我们会尽快解决。