Successfully implemented this for vue using the Webpack config externals
Started by adding the Vue CDN to my HTML file
index.html
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1167647451233f273f2023">[email protected]</a>"></script>
Followed by adjusting the webpack config
vue.config.js
module.exports = {
configureWebpack: {
// ...
externals: {
vue: 'Vue',
}
// ...
},
}
Everything worked smoothly.
However, when attempting the same with vue-class-component and vue-property-decorator, it didn't go as planned
index.html
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcaaa9b99ceef2eaf2edee">[email protected]</a>"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="720407175f111e1301015f111d1f021d1c171c0632455c405c47">[email protected]</a>"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b7d7e6e267b79647b6e797f72266f6e6864796a7f64794b32253b253b">[email protected]</a>"></script>
vue.config.js
module.exports = {
configureWebpack: {
// ...
externals: {
vue: 'Vue',
'vue-class-component': 'VueClassComponent',
'vue-property-decorator': 'VuePropertyDecorator',
}
// ...
},
}
Noticed that the file names ended with .common.js and .umd.js
vue-class-component.common.js
vue-property-decorator.umd.js
Attempted to modify
vue.config.js
module.exports = {
configureWebpack: {
// ...
externals: {
vue: 'Vue',
'vue-class-component': 'commonjs2 vue-class-component',
'vue-property-decorator': 'umd vue-property-decorator',
}
// ...
},
}
Still no success
Here's how I imported them in my src/. Scripts written in TypeScript
import Vue from 'vue'
// ...
import { Component } from 'vue-property-decorator'
Any advice on handling externals in webpack with .common.js and .umd.js? Much appreciated!