Anime: Any plan for ES Modules ?

[cedeber]

Hello,

As ES Modules are now available in browsers (Safari Technology Preview 21+, Firefox 54+) do you have any plan to refactor it to make it compatible ?

I mean by that, real ES Modules, so with .jsat the end of the import (mandatory at the moment and compatible with bundlers), used within <script type="module">, and without the factory story:

import anime from "./animejs/anime.js";

Thanks

[juliangarnier]

I'm not against the idea, but I don't want to break the way anime is imported in current projects.

Any suggestions?

[cedeber]

The source already contains the Universal Module Definition pattern and I would like to see it out from source and let the build/compile tool managing that (TypeScript, babelify, webpack, etc.) So, in fact, only use the new import & export standard in source - which makes it future-proof too.

It will also make it easier for editors code completion and you could also modularize it (utils, animation, paths, ...)

I understand it makes things a lot easier and nicer (package.json is clean too) but as you already publish a minified version I think it won't be boring to split that into some src and build folders, will it?

(I use typescript as an all-in-one compiler - the workflow stays clean and tsc is able to generate a one single umd file from multilple JS files so that you are not going to loose the way you currently share anime)

[cedeber]

Here I did a quick fork and few modifications: https://github.com/cedeber/anime
I move the source file into src, add typescript and modify build.js. It still generates ES6 for anime.js and ES5 for anime.min.js.
Now you can do whatever you want in src, which is ES Modules ready and compatible with all builders.

[cedeber]

Maybe also change main in package.json to link to src/anime.js

[HauntedSmores]

+1

I tried copy/pasting anime.js content from the node_modules folder into my own assets folder to run through my build process. Got a lot of babel errors and the like.

Tried:

import anime from './path/to/my/file/anime.js' (got "no default exported" erros, which make sense looking at the source)

import * as anime from './path/to/my/file/anime.js'

I believe that all has to do with what you guys are discussing.

The reason I wanted to do this is because I wanted to modify the source without the potential for a new version of anime to be released, and then erasing my modifications when running npm install or npm update in the future. (Btw, my enhancement suggestion im trying to achieve is here: #264)

[lukasoppermann]

Hey, I am having the same issue. I am compiling my code via rollup and I would like to import anime.js into my common.js file.

However if I import: ../../node_modules/animejs/anime.js it compiles fine but I get the following error in the browser:

Uncaught TypeError: Cannot set property 'anime' of undefined

Am I doing something wrong or is this because of the UMD wrapper?

[lukeed]

I can submit a PR for this if it's still welcome.

Here's a tiny example with a manual setup that I use a lot -- or can use microbundle if you're okay with offloading some configuration to it.

[juliangarnier]

Sure, you can submit a PR on the 3.0.0 branch.

Thanks!

[juliangarnier]

ES Modules are now supported in V3 !

[cedeber]

Thank you !

[Kufgem]

Hello @juliangarnier,

thanks for supporting ES modules. Unfortunately I can't confirm that it's working for me. Do you have any working example?

I'm using typescript, gulp and babel. In v3 it's still 'TypeScript error Cannot find module lib/anime.es.js

Cheers

[regnisolbap]

@Kufgem, I imported it successfully in my typescript/webpack setup, just by doing

import anime from 'animejs/lib/anime.es.js'

Maybe it should appear in the Readme @juliangarnier ? Anyway thanks for this awesome lib, I'm just getting my hands into it but it's wonderful !