Skip to content

remove requirement of webpack alias for autonumeric #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 0 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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.
Expand Down
27 changes: 0 additions & 27 deletions build/webpack.base.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
};
20 changes: 20 additions & 0 deletions build/webpack.dist.js
Original file line number Diff line number Diff line change
Expand Up @@ -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([
Expand Down
Loading