Блог

Главная - Вопросы по программированию - Как экстернализировать библиотеку с помощью vue-cli

Как экстернализировать библиотеку с помощью vue-cli

#webpack #vue-cli

#webpack #vue-cli

Вопрос:

В моем проекте vue-cli (@vue / cli 4.4.4) я хочу исключить firebase во время сборки и включить его во время выполнения (через index.html ).

В моем package.json У меня есть эти импортные товары

 {
 ...
 "dependencies": {
   ...
    "firebase": "^7.24.0",
    "firebaseui": "^4.7.1"
  },
}

который я хочу исключить из сборки.
Исследование в Google / SO заставило меня включить эти строки в мой vue.config.js :

 module.exports = {
 ...
  configureWebpack: {
    externals: {
      firebaseui: "firebaseui",
      firebase: "firebase",
    },
  }
};

А также в webpack.config.js :

 module.exports = {
  externals: {
    firebase: "firebase",
    firebaseui: "firebaseui",
  },
};

Это, однако, не работает. Firebase по-прежнему включена в сгенерированные js-файлы в dist/js папке.

Как я могу использовать функцию исключения webpack из vue-cli, чтобы связать только мой собственный код с некоторыми небольшими deps?

Ответ №1:

Я тоже наткнулся на этот вопрос. Firebase Web SDK довольно большой в комплекте.

Что я сделал:

Импортировали Firebase Web SDK через свой CDN и поместили его в public/index.html :

 <!-- public/index.html -->
<head>
  ...

  <title>...</title>

  <!-- Firebase App, then all other used services in your app -->
  <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-firestore.js"></script>

  <!-- Firebase UI -->
  <script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.js"></script>
</head>

Создайте a src/firebase.js как единую точку входа для инициализации моей firebase.

 // src/firebase.js
import "firebase/app";

const firebaseConfig = {
    ...
};

firebase.initializeApp(firebaseConfig);

export default firebase;

Затем импортировал его в мой src/main.js файл, прежде чем монтировать приложение.

 // src/main.js
import "@/firebase.js"; // @ is shorthand to /src

import { createApp } from "vue";
...

Используйте Webpack Externals для сопоставления глобального firebase , предоставляемого CDN, с любым импортом с "firebase/app" помощью . Нам не нужно импортировать другие сервисы (например, auth, firestore) в файлы vue, поскольку это будет предоставлено CDN.

 // vue.config.js
module.exports = {
  ...
  chainWebpack: (config) => {
    config.externals({
      "firebase/app": "firebase",
      firebaseui: "firebaseui",
    });
  },
  ...
};

Обратите внимание, что я не включил имя для экспорта импорта по умолчанию выше. При этом, назвав ее также as firebase (чтобы заставить intellisense работать), я получаю предупреждение в браузере: Firebase is already defined in the global scope . Вы могли бы либо:

  • Используйте другое имя для импорта, например: import fb from "firebase/app" . Это позволит intellisense работать при использовании fb.<restOfObject>
  • Или просто не указывайте имя, если вы только собираетесь развернуть приложение и вам не нужен intellisense.

В любом случае, все firebase.<restOfObject> функции будут работать в вашем коде, поскольку внешние компоненты Webpack будут сопоставлять firebase глобальное имя, предоставляемое CDN, со всем вашим импортом firebase/app .

Все остальные компоненты теперь имеют доступ к глобальному firebase объекту даже без импорта.

 // Sample of a .vue file
<script>
const auth = firebase.auth(); // this still works

const ui = new firebaseui.auth.AuthUI(auth); // this too

export default {
  data() {
      ...
  }
};
</script>

Размер сборки Vue

Результат webpack-bundle-analyzer

Ссылки

В том, что я указал здесь, могут быть ошибки. Приветствуется любое улучшение этого ответа. Это мой первый ответ, и я надеюсь, что смогу помочь.

Комментарии:

1. Большое спасибо! Я попробую это сделать. Кроме того, я занимаюсь рефакторингом своего приложения, чтобы firebase использовалась только в одном месте (main.ts). Тогда мне вообще не нужно будет вызывать firebase в файлах vue.