Script Tags in Ember

Questions
1

I’m trying to implement MyScriptJS into my Ember app. However, I can’t seem to get my script tags to work either in my index.html or application.hbs file. What’s the appropriate way to use script tags? Is it appropriate?

Thanks

2

I would say in general it’s not very appropriate. It’s possible there are a couple scenarios where it is the only way but honestly I can’t think of any offhand.

If it’s a 3rd party library you should try to use npm, if it’s your own custom code there are a number of places you could put it depending on what it does. Could you describe the use case a little more and maybe we could try and point you in the right direction?

EDIT: sorry i didn’t realize MyScriptJS was actually a library, i was thinking a generic placeholder name or something. Using npm would be the ideal way. You could either make an in-repo addon or, ideally, use the new functionality around importing npm modules directly.

3

@dknutsen Thanks ! Is there a good write-up on importing NPM modules directly? I haven’t done that before in Ember.

4

@danmalone89 Just do app.import('node_modules/path-to-your-package') in ember-cli-build.js

https://thejsguy.com/2018/04/30/importing-from-node_modules-in-ember.html

5

You can use normal script tags if you want to. The only thing that’s tripping you up is that you need to get the files into the build output. The simplest thing to do is to copy the JS and the CSS file from MyScript into your /public folder. Then in your index.html you can do use script tags just like their docs show:

<link rel="stylesheet" href="./myscript.min.css"/>
<script src="./myscript.min.js"></script>

Alternatively, when you want to import Javascript (though not yet CSS) directly from NPM you can run:

npm install ember-auto-import myscript

And then in your code do import MyScript from 'myscript'; and it will work.

1 Like