编程大白话之-修改原码引入静态组件

使用renren-fast快速开发项目时
引入了vxe-table编辑表格的组件，但是在使用过程中，对使用的组件原码逻辑进行了修改，如果上线本地修改的原码他人无法更新到，于是通过webpack打包，静态引入组件后缀为umd.js的主要文件，达到效果实现。

• 1.首先找到该组件合成后的主要文件并将其放置在static的plugins中

  
  
  微信图片0.png

• 2.webpack.base.config.js
  设置externals参数，引入外部库，无需webpack打包处理

externals:{
  mockjs:'Mock',
  echarts:'echarts',
  ueditor:'UE',
  'vxe-table':'VXETable', // 需要用的
  'xe-utils':'XEUtils' // 需要用到的
}

• 3. 在main.js中全局引入（css文件路径不需要全局）

     
     
     微信图片1.png

• 4. 在index.html文件中通过标签引入文件,将文件放置在正确的static静态路径下

     
     
     图片_.png

• 5. 在config的init.js文件中，设置打包文件路径(注意：引入文件路径的先后顺序)

     
     
     微信图片2.png

• 6. 这样将package.json文件中的dependencies打包配置中将其删除

基本的操作已经设置完成，我们可以打包后将dist文件放置在tomcat中进行测试！