Use external library js

Help Requests
1

Hi all,

i would like to use SortableJS without using npm in my site with typescript aurelia.

I linked in index.html the .js :

image
image885×46 3.36 KB

image
if i use it on index.html it works( and it’s ok)
but when i try to use it on my vm i can’t import this module:
image

anyone have the response?

image
image771×184 9.76 KB

1 Like
2

I am just an Aurelia hack here, but wouldn’t that make it a dom global.

I am not sure it is the correct pattern for adding external libraries, but there is a “prepend” section in aurelia_project/aurelia.json where the CLI adds in javascript libraries.

Would still have to get typescript to understand the types for it I think.

edit: I just found this as well.

1 Like
3

There are a number of different ways to work with this. One thing to keep in mind is that some of the jQuery plugins aren’t designed to export modules so you can’t use import { ModuleName } from 'lib';. One method we’ve used was to make sure jQuery was loaded globally since it’s used all over and with many 3rd party libs such as bootstrap. For example, if you are using webpack you can add it to your webpack.config.js like …

...

entry: {
        app: ['@babel/polyfill', 'aurelia-bootstrapper'],
        vendor: ['bluebird', 'jquery']
    },

...

new ProvidePlugin({
            Promise: 'bluebird',
            $: 'jquery',
            'window.$': 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),
...

Then for those none module jquery plugins you can just use import 'sortablejs' which will attach to the global jQuery/$ object.

1 Like
4

If you already have $ globally accessible then you can just use import 'sortablejs';

1 Like
5

FYI, if you just need some reordering functionality, try bcx-aurelia-reorderable-repeat.

2 Likes
6

thanks guys for the help.

At least I installed all from npm.

1 Like
7

Thanks,

i tryied but it didn’t work.
“$” give me “undefined” data, it seems that jquery doesn’t see the script …
but no problem, I installed all with npm.

1 Like