Bundling with Webpack

FormValidation was rewritten in ES6 from v1.0.0. It comes with the dist/es6 directory that consists of ES6 compatible classes. This guide shows how you can bundle FormValidation with Webpack.
Assume that your folder has the following structure:
the-root-directory
|
├── node_modules
├── vendors
| └── formvalidation
| └── dist
| └── es6
└── webpack.config.js
Now, you can set the alias to FormValidation by adding the resolve.alias setting to webpack.config.js:
// webpack.config.js
const path = require('path');
module.exports = {
resolve: {
extensions: ['.js'],
alias: {
formvalidation: path.resolve(__dirname, 'vendors/formvalidation/dist/es6'),
},
},
...
};
From now on, you can import any file from FormValidation ES6 package as following:
// Use the algorithms
import luhn from 'formvalidation/algorithms/luhn';
// Use the validators
import creditCard from 'formvalidation/validators/creditCard';
const result = creditCard().validate({
value: ...,
options: {
message: ...,
},
});
// Use the core library
import formValidation from 'formvalidation/core/Core';
// Use the plugins
import Icon from 'formvalidation/plugins/Icon';
import Trigger from 'formvalidation/plugins/Trigger';
import Bootstrap from 'formvalidation/plugins/Bootstrap';
...

See also