fix: resolve vue as external library in prod build

bastidest · bastidest · commit 8ea63f2e794f · 2022-07-28T16:54:51.000+02:00
The webpack production build previously bundled vue, resulting in any
library consumer having two instances of vue.  This change declares
the `vue` library as "external" in webpack, skipping the bundeling.
diff --git a/dev/dev-server.js b/dev/dev-server.js
@@ -14,6 +14,9 @@ app.use(webpackMiddleware(webpack(
   publicPath: '/dist/'
 }));
 
+app.use('/esm', express.static(path.resolve(__dirname, 'esm')));
+app.use('/dist-static', express.static(path.resolve(__dirname, '../dist')));
+
 app.get('/', function (req, res) {
   res.render('index');
 });
diff --git a/dev/esm/index.html b/dev/esm/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="/dist-static/main.css">
+  <title>vue-step-progress</title>
+</head>
+<body>
+  <div id="app">
+    <div class="row">
+        <step-progress :steps="steps" :current-step="currentStep" icon-class="fa fa-check" :activeColor="activeColor" :passiveColor="passiveColor" :lineThickness="lineThickness" :activeThickness="activeThickness" :passiveThickness="passiveThickness"></step-progress>
+    </div>
+    <div class="buttons"><button @click="currentStep--">&lt;</button><button @click="currentStep++">></button><button @click="activeColor = &quot;purple&quot; ">Set active color to purple</button><button @click="passiveColor = &quot;pink&quot; ">Set passive color to pink</button>
+        <div style="margin-top:10px"><label> Thickness:</label><input type="text" v-model="lineThickness" /></div>
+        <div style="margin-top:10px"><label> Active Step Thickness</label><input type="text" v-model="activeThickness" /></div>
+        <div style="margin-top:10px"><label> Passive Step Thickness</label><input type="text" v-model="passiveThickness" /></div>
+    </div>
+  </div>
+  <script src="https://unpkg.com/vue@3"></script>
+  <script src="/dist-static/vue-step-progress.min.js"></script>
+  <script src="main.js"></script>
+</body>
+</html>
diff --git a/dev/esm/main.js b/dev/esm/main.js
@@ -0,0 +1,24 @@
+const { createApp } = Vue
+
+createApp({
+  name: 'App',
+  components: {
+    'step-progress': StepProgress.default
+  },
+  data() {
+    return {
+      steps: [
+        'Learn Vue',
+        'Open Source',
+        '???',
+        'Profit'
+      ],
+      currentStep: 0,
+      activeColor: 'red',
+      passiveColor: 'gray',
+      lineThickness: 12,
+      activeThickness: 5,
+      passiveThickness: 5
+    };
+  }
+}).mount('#app')
diff --git a/webpack.prod.config.js b/webpack.prod.config.js
@@ -64,11 +64,8 @@ module.exports = {
       }
     ],
   },
-  resolve: {
-    modules: [
-      'node_modules',
-      'vue'
-    ]
+  externals: {
+    'vue': 'Vue',
   },
   plugins: [
     new VueLoaderPlugin(),
