教你搭建按需加载的某视频剪辑软件组件库（小结)

按需加载的原理

按需加载，本质上是把一个组件库的不同组件拆分成不同文件，按照需要引用对应的文件，而该文件暴露一个安装方法，供Vue.use使用。比如：我只想引用元素库里的一个纽扣组件

从'元素-ui/lib/Button.js '导入纽扣从元素-ui/lib/主题-粉笔/Button.css'Vue.use(按钮)导入按钮；上面的写法比较繁琐，而且需要知道每个组件的实际路径，使用起来并不方便，所以我们还需要借助一个转换插件。

先来看看元素是怎么做的，官方的的「快速手上」:

元素使用一个了巴别塔插件，作用就是代码转换：

从"组件"//导入{按钮}转换为var button=require(' components/lib/button ')require(' components/lib/button/style。' CSS ')到这我们可以知道，要搭建一个按需加载的组件库。主要工作需要两点：

组件独立打包，单个文件对应单个组件引入代码转换的插件组件代码的编写规范

我们在项目的跟目录建一个文件夹包裹，下面放我们的组件：

包装下每一个文件夹对应一个组件所需要的资源，在index.js定义组件的安装方法。而包/索引。射流研究…存放了在全量加载时用的安装方法

包/按钮/索引

从""导入按钮/src/main '；按钮。install=function(Vue){ Vue。组件(按钮。名称、按钮)；};导出默认按钮；包装/按钮/src/main.vue:

模板差异我是一个纽扣组件/div/模板包/索引。js :

从""导入按钮“/Button”；从""导入加载/正在加载'；从""导入加载更多/LoAdMoore '；常量组件=[按钮，加载更多，加载];const install=function(Vue){ components。foreach(组件={ Vue。组件(组件。名称、组件)；});}如果(窗口类型！=="未定义"窗口Vue) {安装(窗口vue)}导出默认值{安装，//全量引入按钮，加载更多，加载};工具配置

组件代码写好了，接下来需要配置一下工具的打包逻辑。我们复用脚手架生成的模板，在上面做一些必要更改：

多入口

每个组件独立生成一个对应的射流研究…和css，这就需要我们在入口处就把组件的引用定义好：

webpack.prod.conf.js:

const entrys={ button :路径。resolve(_ _ dirname '，/packages/Button ')，索引：路径。解析(_ _ dirname '，/packages ')}；const webpackConfig=merge(basebpackconfig，{ entry: entrys，//.});上述配置每增加一个组件都需要修改入口，我们可以优化一下，使其动态生成：

webpack.prod.conf.js:

const entrys=require(./getComponents.js)([组件目录入口]);const webpackkconfig=merge(base webpackkconfig，{ entry: entrys，});getComponents.js:

const fs=require(' fs ')；const path=require(' path ')；/** * 判断刚路径是否含有索引。js * @ param { String } dir */函数hasIndexJs(dir){ let dirs=[]；尝试{ dirs=fs。readdirsync(dir)；} catch(e){ dirs=null；}返回德克斯特德克斯特。包括('索引。js’)；}/** * 获取指定入口和入口下包含index.js的文件夹的路径* @ param { String } Entrydir */const GetPath=function(Entrydir){ let dirs=fs。readDirsync(Entrydir)；const result={ index : EntryDir }；dirs=dirs。filter(dir={ return hasIndexJs(路径。解析(entryDir，dir))；}).forEach(dir={ result[dir]=path。解析(entryDir，dir)；});返回结果；} module.exports=getPath修改工具的输出

默认生成的射流研究…文件并不支持ES6引入，在这里我们设置成通用媒体光碟

输出： {路径： config。建造。资产根目录，文件名： utils。资产路径('[名称]).js ')，library: 'LoadOnDemand '，libraryTarget: ' umd ' }，配置巴别塔插件组件

上面的组件库打包发布到新公共管理上之后。我们在使用的时候新公共管理安装巴别塔插件组件之后，修改一下。babelrc.js:

Plugins' : [['component '，{ ' library name ' : ' load-on-demand '，//组件库的名称' camel2Dash': false，//是否将hump转换为xx-xx编写的' style library ' : { ' base ' : false，//每个组件是否引用base . css ' name ' : ' theme '//默认情况下CSS目录的名称}}]，这里提到属性camel2Dash，Open by

结论

上面的演示代码放在个人的GitHub github.com/jmx16449196.如果你有更好的实现方法，或者有需要改正的错误，欢迎交流。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。