scrm-loader

scrm-loader 主要包括三个 webpack loader：

1. element-batch-loader : 支持对所有基于 element 库二次开发的组件库进行按需导入语句插入，代码中直接按照cdn的方式使用组件，loader 自动补全 import 语句和 components 注册代码；
2. vant-loader : 支持自动补全 vant 组件库按需导入语句插入，代码中直接按照cdn的方式使用组件；loader 自动补全 import 语句和 components 注册代码；
3. 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 | 无 | 否 | 自定义错误提示信息，如果不填写则使用默认提示信息 |

使用建议

虽然我们尽可能全面的对代码做了测试。但水平有限，难免疏漏，如果你在使用过程中遇到问题可以先将冗余注释代码删除然后再试，因为有些注释可能会影响我们对组件引入的判断。另外删除无用的代码注释也是比较好的编码实践 冗余的注释不仅影响代码阅读也会拖慢打包速度~

如果问题依然无法解决，可以联系 [email protected] ，我们会尽快解决。