How to use ES6 import (client-side JS)

es6-modules vee-validate
rrebase picture rrebase · Mar 2, 2018 · Viewed 11.6k times · Source

I am trying to use VeeValidate and the examples show the usage of ES6 import like this:

import { Validator } from 'vee-validate';

My understanding is that this works only with npm and not with CDN. I want to just write client-side js and not use node js. Do I have to look into something like browserify or webpack?

I tried to copy the javascript from the CDN link and just make it a local js file for importing, but could not get it working. Did it not work because I did not have export statements?

Answer

GLAND_PROPRE picture GLAND_PROPRE · Jul 7, 2018

Currently import / export syntax is supported by 90% of all users browser (caniuse.com).

You can use it to "include" your script. The first thing to do is to put type="module" as an attribute of a <script tag> (Eg. <script type="module">)

Then you can import/export in your js scripts. And YES modules need to export a value (variable, function...) to be able to use it in another script, but this is optionnal since you can just execute script without the need to export something.

Documentation:

Keep in mind that is not yet a fully supported feature and you will need a polyfill if you mind about browser compatibility

Related questions

How can I use an ES6 import in Node.js?

I'm trying to get the hang of ES6 imports in Node.js and am trying to use the syntax provided in this example: Cheatsheet Link I'm looking through the support table, but I was not able to find what version …

Read More
Is it possible to import modules from all files in a directory, using a wildcard?

With ES6, I can import several exports from a file like this: import {ThingA, ThingB, ThingC} from 'lib/things'; However, I like the organization of having one module per file. I end up with imports like this: import ThingA from …

Read More
How can I alias a default import in JavaScript?

Using ES6 modules, I know I can alias a named import: import { foo as bar } from 'my-module'; And I know I can import a default import: import defaultMember from 'my-module'; I'd like to alias a default import and I had …

Read More