Fixes autoNumeric#29, autoNumeric#25 remove requirement of webpack alias for autonumeric dependency

Author: agentschmitt

README.md

@@ -39,20 +39,6 @@ This means you **need** to link the [AutoNumeric](https://github.com/autoNumeric
 <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 an ES6 module
 
 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:
@@ -76,23 +62,6 @@ export default {
 }
 ```
 
-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**, otherwise Webpack will complain about the npm package `autonumeric` case.
-
-The alias that you need to declare in your Webpack configuration:
-```js
-module.exports = {
-    entry  : './src/vueAutonumericTest.js',
-    output : {
-        filename: './dist/bundle.js'
-    },
-    resolve: {
-        alias: {
-            AutoNumeric: 'node_modules/autonumeric/dist/autoNumeric.min',
-        },
-    },
-};
-```
-
 ### How to use?
 
 The AutoNumeric component can be instantiated the same way `AutoNumeric` can.

build/webpack.base.js

@@ -67,31 +67,4 @@ module.exports = {
         children: false,
         timings : true,
     },
-
-    externals: {
-        // This prevent bundling the AutoNumeric library inside the vue-autonumeric component
-        // cf. https://webpack.js.org/configuration/externals/
-        //XXX Note: You need to use `<npmPath>: 'AutoNumeric'` if you want to be able to just use a script CDN link to the AutoNumeric library, since it's exported as `AutoNumeric` (with this case) //FIXME But what happens when the user do not use a script link but directly import 'AutoNumeric' with `import AutoNumeric from 'autonumeric'`?
-        /*
-         * Important note:
-         * We need to use `<npmPath>: 'AutoNumeric'` here since we want the user to be able to just use a
-         * CDN link to the AutoNumeric library and make sure `vue-autonumeric` will correctly use this
-         * name (since it's exported as `AutoNumeric`, with this case).
-         *
-         * However if you are using `vue-autonumeric` in an ES6 module setup with a bundling tool
-         * (ie. Webpack), then you'll need to declare in your project an alias so that Webpack will know
-         * how to recognize the correct library name case.
-         *
-         * The alias configuration example for Webpack:
-         * resolve: {
-         *     extensions: ['.js', '.vue', '.json'],
-         *     alias     : {
-         *         '~'          : resolve('node_modules'),
-         *         '@'          : resolve('src'),
-         *         'AutoNumeric': resolve('node_modules/autonumeric/dist/autoNumeric.min'),
-         *     },
-         * },
-         */
-        'autonumeric/dist/autoNumeric.min': 'AutoNumeric',
-    },
 };

build/webpack.dist.js

@@ -37,6 +37,26 @@ config.plugins = config.plugins.concat([
     }),
 ]);
 
+config.externals = {
+    // This prevent bundling the AutoNumeric library inside the vue-autonumeric component
+    // cf. https://webpack.js.org/configuration/externals/
+    /*
+     * Important note:
+     * We need to setup root to use global variable here, since we want the user to be able to just use a
+     * CDN link to the AutoNumeric library and make sure `vue-autonumeric` will correctly use this
+     * (since it's exported as `AutoNumeric`, with this case).
+     *
+     * However if you are using `vue-autonumeric` in an ES6 module setup with a bundling tool
+     * (ie. Webpack), then it should still import 'autonumeric' with this case from your node_modules.
+     */
+    autonumeric: {
+        commonjs2: 'autonumeric',
+        commonjs: 'autonumeric',
+        amd: 'autonumeric',
+        root: '_', // indicates global variable 'AutoNumeric'
+    },
+};
+
 if (options.isProduction) {
     // Production only
     config.plugins = config.plugins.concat([