深入但不淺出，webpack + vue 建立團隊的共用 Components

Milk Midi

3 min readMay 4, 2020

大家好，我是奶綠茶
一般網站都會有共用的 Header , Footer，
當其他團隊/廠商也要套用共用版型該怎麼辦?
整包給 html, css, js ? 太麻煩了，而且日後更新怎麼辦?

我們可以參考 Gogoro 台灣的網站
https://www.gogoro.com/tw/

看一下網站的原始碼就可以看到 html 裡有出現一段 ggr-nav 的 tag
和 ggr-components js

這樣其他團隊/廠商要用，只要把 js src進來，再加上一段 html 的 tag
就完成了，是不是很方便。

程式進入點寫成這樣

import Vue from 'vue';
import MyNavigation from '@/components/MyNavigation.vue';
import MyFooter from '@/components/MyFooter.vue';if (typeof window.Vue === 'undefined') {
  throw new Error('Vue is not available in your browser.');
}document.addEventListener('DOMContentLoaded', () => {
  const myComponents = document.querySelectorAll('my-navigation,my-footer');
  [].forEach.call(myComponents, (el:HTMLElement) => {
    new Vue({
      el,
      components: {
        'my-navigation': MyNavigation,
        'my-footer': MyFooter,
      },
    }).$mount(el);
  });
});

為了不要把整個 vue js 打包進來，可以在 webpack externals 加入

webpack.config.js
module.exports = {
  略,
  // 打包時，要排除哪些第三方套件包
  /*
    如果不加
    import Vue from 'vue';
    就會把整個 Vue 的 Source 都打包裡你的程式，會肥滋滋的
    因為我們用了 cdnjs ，所以不需要再打包
    */
  // https://webpack.js.org/configuration/externals/#externals
  // https://ithelp.ithome.com.tw/articles/10187554
  externals: {
    vue: 'Vue',
  },
}

完成，收工

github sourceCode 祝大家學習愉快
https://github.com/milkmidi/vue-examples/tree/master/202005_your-component

深入但不淺出，webpack + vue 建立團隊的共用 Components

Written by Milk Midi