Closed strarsis closed 7 years ago
this path is actually correct. the library is published on NPM with the lib/
folder that is the 'built' version. lib folder is exported with the .js 'babel compiled' files, the .js.map sourcemaps and even the *.js.flow flowtypes.
when you install via npm:
➜ tree node_modules/kenburns
node_modules/kenburns
├── LICENSE
├── README.md
├── kenburns.js
├── lib
│ ├── Base.js
│ ├── Base.js.flow
│ ├── Base.js.map
│ ├── Canvas2D.js
│ ├── Canvas2D.js.flow
│ ├── Canvas2D.js.map
│ ├── DOM.js
│ ├── DOM.js.flow
│ ├── DOM.js.map
│ ├── WebGL.js
│ ├── WebGL.js.flow
│ ├── WebGL.js.map
│ ├── index.js
│ ├── index.js.flow
│ ├── index.js.map
│ └── utils
│ ├── cssRgba.js
│ ├── cssRgba.js.flow
│ └── cssRgba.js.map
├── package.json
└── src
├── Base.js
├── Canvas2D.js
├── DOM.js
├── WebGL.js
├── index.js
└── utils
└── cssRgba.js
4 directories, 28 files
and then you should not have to do any alias, it should work if you import "kenburns" / require("kenburns")
What would be the best approach importing the kenburns DOM module standalone?
With the webpack resolve alias, I currently use - but how to avoid it for /DOM, too?
[...]
import KenBurnsDOM from 'kenburns/DOM';
[...]
https://github.com/gre/kenburns/blob/master/README.md
see in the main README:
import KenBurnsDOM from "kenburns/lib/DOM";
import rectCrop from "rect-crop";
import bezierEasing from "bezier-easing";
const image = new Image();
image.src = "http://i.imgur.com/Uw2EQEk.jpg";
image.onload = () => {
var div = document.createElement("div");
document.body.appendChild(div);
div.style.width = "400px";
div.style.height = "400px";
var kenBurns = new KenBurnsDOM(div);
kenBurns.animate(
image,
rectCrop(0.4, [0.15, 0.38]),
rectCrop.largest,
5000,
bezierEasing(0.6, 0.0, 1.0, 1.0)
);
};
Thanks!
In package.json the old path is still used: https://github.com/gre/kenburns/blob/master/package.json#L4
I currently have to use a resolve alias in webpack for resolving it correctly: