如何使用 vue-cli 将库外部化

Question

在我的 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 仍然包含在dist/js文件夹中生成的 js 文件中。

如何使用来自 vue-cli 的 webpack 的排除功能仅将我自己的代码与一些小部门捆绑在一起？

Answer 1

我也偶然发现了这个问题。 Firebase Web SDK 捆绑时相当大。

我做了什么：

通过他们的 CDN 导入 Firebase Web SDK 并将其放置在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>

创建一个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 to map 全局firebase由 CDN 公开给任何带有"firebase/app"的导入。 我们不需要在 vue 文件中导入其他服务（即 auth、firestore），因为它将由 CDN 提供。

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

请注意，我没有包含上述导入的默认导出的名称。 通过将其命名为firebase （让智能感知工作）这样做会在浏览器中向我发出警告： Firebase is already defined in the global scope 。 您可以：

为导入使用不同的名称，例如： import fb from "firebase/app" 。 这将使智能感知在使用fb.<restOfObject>时工作
或者，如果您正要部署应用程序并且不需要智能感知，则不要包含名称。

Either way, all of the firebase.<restOfObject> functions will work on your code, since the Webpack Externals will map the firebase global name exposed by the CDN to all your imports with firebase/app .

即使不导入，所有其他组件现在都可以访问全局firebase object。

// 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 构建大小

参考

我在这里指出的内容可能有错误。 对此答案的任何改进表示赞赏。 这是我的第一个答案，希望能帮到你。

如何使用 vue-cli 将库外部化

问题描述

1 个解决方案

解决方案1
2 已采纳 2021-03-27 04:28:48

我做了什么：

Vue 构建大小

参考

如何使用 vue-cli 将库外部化

问题描述

1 个解决方案

解决方案1 2 已采纳 2021-03-27 04:28:48

我做了什么：

Vue 构建大小

参考

解决方案1
2 已采纳 2021-03-27 04:28:48