Webpack 如何使用vue cli外部化库

在我的vue cli项目（@vue/cli 4.4.4）中，我希望在构建时排除firebase，并在运行时将其包括在内（通过index.html）

在我的

package.json

中，我有这些导入

{
...
“依赖项”：{
...
“firebase”：“^7.24.0”，
“firebaseui”：“^4.7.1”
},
}

我想从构建中排除它。 Google/SO中的研究让我在我的

vue.config.js

中包含这些行：

module.exports={
...
配置网页包：{
外部：{
firebaseui：“firebaseui”，
火力基地：“火力基地”，
},
}
};

也在

webpack.config.js

中：

module.exports={
外部：{
火力基地：“火力基地”，
firebaseui：“firebaseui”，
},
};

然而，这是行不通的。Firebase仍然包含在

dist/js

文件夹中生成的js文件中

---

如何从vue cli中使用webpack的排除功能，将自己的代码与一些小的DEP捆绑在一起？

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

我所做的： 通过其CDN导入Firebase Web SDK，并将其放入

public/index.html

：

...
...

创建一个

src/firebase.js

作为初始化firebase的单个入口点

//src/firebase.js
导入“firebase/app”；
常量firebaseConfig={
...
};
firebase.initializeApp（firebaseConfig）；
导出默认firebase；

然后在安装应用程序之前，将其导入我的

src/main.js

文件中

//src/main.js
导入“@/firebase.js”；//@是/src的简写
从“vue”导入{createApp}；
...

使用Webpack Externals将CDN公开的全局

firebase

映射到具有

“firebase/app”

的任何导入。我们不需要在vue文件中导入其他服务（即auth、firestore），因为它将由CDN提供

//vue.config.js
module.exports={
...
链接网页包：（配置）=>{
config.externals({
“firebase/app”：“firebase”，
firebaseui：“firebaseui”，
});
},
...
};

请注意，我没有为上述导入的默认导出包含名称。通过将其命名为

firebase

（以使intellisense正常工作）在浏览器中向我发出警告：

firebase已在全局范围中定义。你可以：


为导入使用其他名称，例如：
从“firebase/app”导入fb
。这将使intellisense在使用
fb时工作。


或者，如果您正准备部署应用程序且不需要intellisense，则不要包含名称



无论哪种方式，所有的
firebase.
功能都会对您的代码起作用，因为网页外部会将CDN公开的
firebase
全局名称映射到您使用
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文件的示例
const auth=firebase.auth（）；//这仍然有效
const ui=new firebaseui.auth.AuthUI（auth）；//这也是
导出默认值{
数据（）{
...
}
};

Vue构建大小

工具书类




我在这里指出的可能有错误。对此答案的任何改进都将不胜感激。这是我的第一个答案，我希望我能帮上忙。
我也偶然发现了这个问题。Firebase Web SDK捆绑时相当大

我所做的：
通过其CDN导入Firebase Web SDK，并将其放入
public/index.html
：


...
...

创建一个
src/firebase.js
作为初始化firebase的单个入口点

//src/firebase.js
导入“firebase/app”；
常量firebaseConfig={
...
};
firebase.initializeApp（firebaseConfig）；
导出默认firebase；

然后在安装应用程序之前，将其导入我的
src/main.js
文件中

//src/main.js
导入“@/firebase.js”；//@是/src的简写
从“vue”导入{createApp}；
...

使用Webpack Externals将CDN公开的全局
firebase
映射到具有
“firebase/app”
的任何导入。我们不需要在vue文件中导入其他服务（即auth、firestore），因为它将由CDN提供

//vue.config.js
module.exports={
...
链接网页包：（配置）=>{
config.externals({
“firebase/app”：“firebase”，
firebaseui：“firebaseui”，
});
},
...
};

请注意，我没有为上述导入的默认导出包含名称。通过将其命名为
firebase
（以使intellisense正常工作）在浏览器中向我发出警告：
firebase已在全局范围中定义。你可以：


为导入使用其他名称，例如：
从“firebase/app”导入fb
。这将使intellisense在使用
fb时工作。


或者，如果您正准备部署应用程序且不需要intellisense，则不要包含名称



无论哪种方式，所有的
firebase.
功能都会对您的代码起作用，因为网页外部会将CDN公开的
firebase
全局名称映射到您使用
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文件的示例
const auth=firebase.auth（）；//这仍然有效
const ui=new firebaseui.auth.AuthUI（auth）；//这也是
导出默认值{
数据（）{
...
}
};

Vue构建大小

工具书类




我在这里指出的可能有错误。对此答案的任何改进都将不胜感激。这是我的第一个答案，我希望我能帮上忙。