开发业务组件库踩坑记录

1、打包完业务组件库特别大，由于依赖了很多包如axios，echarts 都会被打包进来；

chainWebpack: config => {
        config.module
            .rule('js')
            .include
            .add('/packages')
            .end()
            .use('babel')
            .loader('babel-loader')
            .tap(options => {
                return options
            })
            config.externals({
              'vue': 'Vue',
              'vue-router': 'VueRouter',
              'axios': 'axios',
              'vant': 'vant',
              'v-charts': 'VeIndex',
              'echarts': 'echarts',
              "moment": "moment",
            })
    },

优化前

优化后： 

2、记住公共包和样式、配置要写在public下，不能写在src下，否则会将一些其他无关代码打包到组件中。

3、组件中的图片处理，如果图片大小小于10240，都按照二进制打包到JS中，我这里使用的都是一些小图片所以大多满足条件。如果大于10240的webpack打包压缩处理。图片路径要想不变，可以将背景图片样式放在公共样式中，公共样式和图片的相对位置保证一致，在使用组件中就不会出现找不到背景图片的情况。

4、组件中如果使用加载中的这样的子组件，这时候我们需要，将子组件注册到Vue全局，否则会出现组件无法使用的情况。

5、打包问题配置注意。npm上传配置ignore,指定npm源地址。

6、npm包下载，需要将包的依赖也下载下来。

7、vue.config.js中配置图片压缩，配置如下：

"devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-plugin-import": "^1.13.3",
    "image-webpack-loader": "^7.0.1",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "vue-template-compiler": "^2.6.11"
  },

下载不下来 

npm install 后项目启动不起来：

 后来通过网上查阅说是包下载的不够（可能是由于我配置的是私服，私服有点问题，有的依赖总是下载不全，特别是我总结出来是依赖需要的依赖包这种），需要我们先把依赖分别从私服下载一次，这样私服就有记录了，后续就能直接通过私服下载了。所以增加配置

  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-plugin-import": "^1.13.3",
    "gifsicle": "^5.2.0",
    "image-webpack-loader": "^7.0.1",
    "imagemin-pngquant": "^9.0.2",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "optipng-bin": "^7.0.0",
    "pngquant-bin": "^6.0.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "vue-template-compiler": "^2.6.11"
  },

增加后，删除npm包再npm install 下载就可以了，本地的问题就是下载下乳这几个包的时候相当慢，不知道啥原因。反正暂时好使了。

我兴高采烈的将修改后的版本提交到测试环境，jenkins下载包的时候报了如下的错，

经过百度给的解决方案是npm install --unsafe-perm ，增加这个参数；我修改配置后，重新打包可以了，但是这几个包下载的依然慢，不知道什么问题。需要再研究一下，好在npm包下载后下次不需要重新下载。