Fix the component size issue which bundled the whole AutoNumeric library

AlexandreBonneau · AlexandreBonneau · commit 42efe4d22991 · 2017-11-29T11:24:26.000-10:00
Update the documentation with how to install the component, depending if the AutoNumeric library should be bundled or not

Signed-off-by: Alexandre Bonneau &lt;alexandre.bonneau@linuxfr.eu&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 ## Changelog for vue-autoNumeric
 
+### 1.0.4
++ Fix the component size issue which bundled the whole `AutoNumeric` library
++ Update the documentation with how to install the component, depending if the AutoNumeric library should be bundled or not
+
 ### 1.0.3
 + Fix importing issues with the `AutoNumeric` library
 + Complete the documentation on how to install and use the component
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 ## vue-autoNumeric
 
-A Vue.js component that wraps the awesome autoNumeric input formatter library
+A Vue.js component that wraps the awesome [AutoNumeric](https://github.com/autoNumeric/autoNumeric/) input formatter library
 
 [![NPM][nodei-image]][nodei-url]
 <br>
@@ -12,7 +12,7 @@ Get in touch on [![Gitter chat][gitter-image]][gitter-url]
 
 ---
 
-vue-autoNumeric wraps the awesome autoNumeric library and generate an `<input>` element managed by [AutoNumeric](https://github.com/autoNumeric/autoNumeric/).
+vue-autoNumeric wraps the awesome AutoNumeric library and generate an `<input>` element managed by [AutoNumeric](https://github.com/autoNumeric/autoNumeric/).
 
 **Checkout the [demo](https://codepen.io/AnotherLinuxUser/pen/pWgOrZ?editors=1010)!**
 
@@ -28,28 +28,71 @@ npm install vue-autonumeric --save
 
 This means you **need** to link the [AutoNumeric](https://github.com/autoNumeric/autoNumeric/) library with either ways:
  
-#### ...in your html `<head>` tag
-In the html `<head>` tag directly, or by using a CDN like so:
+#### ...in your html `<head>` tag directly
 
 ```html
+<!-- locally... -->
 <script src="../node_modules/autonumeric/dist/autonumeric.min.js"></script>
-<!-- or -->
-<script src="//unpkg.com/autonumeric"></script>
+<!-- ...or by using a CDN -->
+<script src="https://unpkg.com/autonumeric"></script>
+```
+
+Then you need to tell Webpack to treat the `AutoNumeric` dependency as [external](https://webpack.js.org/configuration/externals/) so that it does not try to bundle it.<br>Here is a really simple `webpack.config.js` example that does that:
+
+```js
+module.exports = {
+    entry  : './src/vueAutonumericTest.js',
+    output : {
+        filename: './dist/bundle.js'
+    },
+    externals: {
+        AutoNumeric: 'AutoNumeric',
+    },
+};
 ```
 
 #### ...or by importing it directly as a module
-You can choose to directly import the `AutoNumeric` library in your source code using:
+
+You can choose to directly import the AutoNumeric library in your source code.<br>First, install the `autonumeric` dependency so that Webpack can find it using:
 
 ```sh
 yarn add autonumeric
 # or
 npm install autonumeric --save
 ```
 
-You'll then be able to use the `vue-autonumeric` component in your scripts using:
+You will as usual be able to use the `vue-autonumeric` component in your Vue components using:
+```js
+import VueAutonumeric from '../src/components/VueAutonumeric.vue';
+
+export default {
+    name      : 'myComponent',
+
+    components: {
+        VueAutonumeric,
+    },
+
+    data() {
+        return {
+            //
+        };
+    },
+}
+```
+
+However, when doing that if you want to be able to bundle all the scripts together with Webpack, you'll need to define an alias for the `AutoNumeric` library in your Webpack config like so:
 ```js
-import AutoNumeric from 'autonumeric';
-import VueAutonumeric from 'vue-autonumeric';
+module.exports = {
+    entry  : './src/vueAutonumericTest.js',
+    output : {
+        filename: './dist/bundle.js'
+    },
+    resolve: {
+        alias: {
+            AutoNumeric: 'autonumeric/dist/autoNumeric.min',
+        },
+    },
+};
 ```
 
 ### How to use?
diff --git a/build/webpack.base.js b/build/webpack.base.js
@@ -71,6 +71,6 @@ module.exports = {
     externals: {
         // This prevent bundling the AutoNumeric library inside the vue-autornumeric component
         // cf. https://webpack.js.org/configuration/externals/
-        AutoNumeric: 'autonumeric',
+        AutoNumeric: 'AutoNumeric',
     },
 };
diff --git a/dist/vue-autonumeric.js b/dist/vue-autonumeric.js
diff --git a/dist/vue-autonumeric.min.js b/dist/vue-autonumeric.min.js
diff --git a/examples/examples.bundle.js b/examples/examples.bundle.js
diff --git a/examples/index.html b/examples/index.html
@@ -21,6 +21,7 @@
 </head>
 <body>
 <div id="app"></div>
+<script src="https://unpkg.com/autonumeric"></script>
 <script src="examples.bundle.js"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-autonumeric",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "An AutoNumeric wrapper for Vue.js",
   "author": "Alexandre Bonneau <alexandre.bonneau@linuxfr.eu>",
   "license": "MIT",
diff --git a/src/components/VueAutonumeric.vue b/src/components/VueAutonumeric.vue
@@ -1,8 +1,8 @@
 <!--
               vue-autonumeric
 
-@version      1.0.3
-@date         2017-09-19 UTC 08:00
+@version      1.0.4
+@date         2017-11-29 UTC 20:00
 
 @author       Alexandre Bonneau
 @copyright    2016 © Alexandre Bonneau <alexandre.bonneau@linuxfr.eu>
@@ -54,7 +54,7 @@ OTHER DEALINGS IN THE SOFTWARE.
 </template>
 
 <script type="text/babel">
-    import AutoNumeric from 'autonumeric';
+    import AutoNumeric from 'AutoNumeric';
 
     // Custom default autoNumeric option can be set here to override the default autoNumeric ones
     const defaultOptions = {};

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vue-autonumeric",`
`3`		`- "version": "1.0.3",`
	`3`	`+ "version": "1.0.4",`
`4`	`4`	`"description": "An AutoNumeric wrapper for Vue.js",`
`5`	`5`	`"author": "Alexandre Bonneau <[email protected]>",`
`6`	`6`	`"license": "MIT",`