mission2-抽出公共代码制作组件上传至gitlab

背景:项目中有一套常用的组件库,每个项目都是复制粘贴过去的,一旦组件库有改动,项目将不好控制。将组件库打包上传后,项目可按照按照组件库版本按需更新。

  1. gitlab新建项目上传代码后,
    npm install git+<项目地址>,可以安装指定位置的组件。

  2. 尝试使用webpack-simple模板打包组件,umd、commonjs2规则打包完毕后,项目引入组件报错某方法未找到失败了X(

  3. 不打包,直接在package.json中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    "peerDependencies": {
    "axios": "^0.18.0",
    "echarts": "^4.1.0",
    "element-ui": "^2.4.6",
    "md5-base64": "0.0.3",
    "moment": "^2.22.2",
    "vue": "^2.5.11",
    "vue-echarts": "^3.1.2",
    "vue-events": "^3.1.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
    },

声明依赖文件,项目中使用,报错jsx语法不能使用。(感觉这种方式不对,应该是先打包再发布才对的)

  1. 返回第2步,查找打包失败的原因:最终确定为使用了es6语法,修改webpack.config.js配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    // 添加工具uglifyjs
    const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
    module.exports = {
    // 这里把依赖文件写上,确保不会重复打包
    externals: {
    vue: {
    root: 'Vue',
    commonjs: 'vue',
    commonjs2: 'vue',
    amd: 'vue'
    },
    axios:"axios",
    "element-ui": "element-ui",
    "md5-base64": "md5-base64",
    "moment": "moment",
    "vue-events": "vue-events",
    "vue-router": "vue-router",
    "vuex": "vuex"
    },
    }
    if (process.env.NODE_ENV === 'production') {
    // more code
    module.exports.plugins = (module.exports.plugins || []).concat([
    // more code
    // 这里把webpack的uglifyjs换成这个,就能正确打包了
    new UglifyJSPlugin({
    sourceMap: true
    }),
    new webpack.LoaderOptionsPlugin({
    minimize: true
    })
    ])
    }
  2. 版本控制问题:因为不是npm上提交的没办法直接public-core@1.1.0这样安装,需要改为使用分支或标签控制版本,https://***.com/name/project.git#<branch or tags>命令安装组件

坚持原创技术分享,您的支持将鼓励我继续创作!