We Keep Coding

How to import and use npm package in Ember.js?

I am new to EmberJS and I want to import and use the crypto-js in my EmberJS app, I used ember install crypto-js to install the package, then add those lines in ember-cli-build.js to add them to ember build to use SHA256 function:
app.import('node_modules/crypto-js/core.js');
app.import('node_modules/crypto-js/crypto-js.js');
app.import('node_modules/crypto-js/sha256.js');
And I can see that in browser, assets/node_modules has the crypto-js folder with above 3 files. However I still got Could not import module 'crypto-js' error. How to solve it? Thanks!

There is no need for app.import.
As long as you have ember-auto-import installed, or you are using embroider (which defers to webpack), you can follow the documentation: https://www.npmjs.com/package/crypto-js
import sha256 from 'crypto-js/sha256';
import hmacSHA512 from 'crypto-js/hmac-sha512';
import Base64 from 'crypto-js/enc-base64';

Thanks for all the answers. It is an old project and after I installed ember-auto-import and webpack i got many build errors. I dont want to waste time on fixing them, but finally i got it worked:
app.import('node_modules/crypto-js/crypto-js.js',{
using:[
{transformation: 'amd', as: 'CryptoJS'}
]
});
Then I can import it and use in other .js files, like this:
import CryptoJS from 'CryptoJS';

Create a file called crypto-js.js in the shims folder and add this code
import 'crypto-js/core';
import 'crypto-js/sha256';
export default window.CryptoJS;
In your ember-cli-build.js file, add this linne:
app.import('vendor/shims/crypto-js.js', { using: [{ transformation: 'cjs', as: 'crypto-js' }] });
in your component, controller or model, you can import the library and use the SHA256 function like this
import crypto from 'crypto-js';
const hash = crypto.SHA256("Message to hash");
console.log(hash.toString());

Importing JS libraries to Vue.js

I'm trying to use hammer.js on my project, however I'm having trouble importing it. I have installed the library through npm by npm i hammerjs. Imported it on my main.js file as import 'hammerjs' and then when I do
var hammertime = new Hammer(myElement, myOptions)
hammertime.on('pan', function(ev) {
console.log(ev)
})
I get errors saying Hammer is not defined. What is the correct way to import libraries in vue?

You can include hammerjs with:
import * as Hammer from 'hammerjs'
A side note: You can do the same to include other libraries installed with npm in your vue project. For example, if you want to include ThreeJS In your .js or .vue files, simply type in:
import * as THREE from 'three'

if you want, install the wrapper hammerjs to vue, follow the link:
https://www.npmjs.com/package/vue2-hammer
otherwise, do you need include the lib on the index.html, but a don't recommend.
ps: I would like do comment, but i don't have reputation.

import js module in js file in vuejs2

I've started a project with the new vue-cli 3.0 and I've added the qwery npm module in node package.json
npm i qwery
and in my-file.js which is at same level as main.js I import it the following way:
import {qwery as $q} from "qwery"
The build goes ok however in the browser $q is undefined and webpack has imported it as qwery__WEBPACK_IMPORTED_MODULE_8__.
Clearly I'm not doing it the right way can somebody give me a hint what I'm doing wrong?

You need to import it like this
import $q from 'qwery';

VueJS CLI function not available

i'm new to VueJS CLI webpack.
I want to globally include my javascript files.
my main.js:
require('./assets/css/main.css');
require('./assets/js/vendor/jquery-2.2.4.min.js');
require('./assets/js/vendor/TweenMax.min.js');
require('./assets/js/vendor/device.min.js');
require('./assets/js/functions.js');
In functions.js i'm using functions from all of the libraries(jquery,device.js...)
I get the error:
Uncaught ReferenceError: TweenMax is not defined
...
Why cant i use the libraries in functions.js ? i'm confused.
Thanks in advance

That doesn't work because of how vue and webpack handle assets and static files.
Usually you would just install your module via npm like:
npm install gsap --save
That's for TweenMax you tried to use. You'll find it on npm here.
Then in the .vue file where you want to use it, you would just import and use it:
<script>
import {TweenMax} from 'gsap'
export default {
methods: {
myMethod () {
TweenMax.to()
}
}
}
</script>
If you want to use them in several components you could consider adding them as instance properties. Then you don't have to import them manually all the time.

Webpack / NPM: Use build version of installed module instead of re-building from source

I would like to use the dat.GUI library for a project that's build with Webpack 2. If I install the module via npm -install --save-dev dat.gui and then try to import it using import * as DAT from 'dat.gui'; I get the following error when Webpack is trying to compile my project:
ERROR in ./~/dat.gui/src/dat/controllers/NumberControllerSlider.js
Module not found: Error: Can't resolve 'style' in
'/home/me/myProject/node_modules/dat.gui/src/dat/controllers'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix
when using loaders.
I know this error occurs when using Webpack 2 to build Webpack 1 based projects. But why is Webpack even trying to build the module if there already is a build version inside node_modules/dat.gui/build';? Is there a way to tell Webpack or NPM to use the existing build version without trying to re-build it?

When importing a node module, webpack looks into its package.json and uses the main field as entry of the module, similar to what Node.js does (webpack looks for more fields by default, see resolve.mainFields).
Since for dat.gui the main field does not point to the built version but to the source, which actually inlines loaders as seen in dat.gui#0.6.1 - NumberControllerSlider.js for the styleSheet import, and that is not a good idea in general and certainly not to publish.
But you can import the built version by specifying the corresponding path. So your import would be:
import * as DAT from 'dat.gui/build/dat.gui.js';
If you'd like to still import just dat.gui you can configure resolve.alias to point to the built version as follows:
resolve: {
alias: {
'dat.gui': 'dat.gui/build/dat.gui.js'
}
}
With that you can use your original import statement:
import * as DAT from 'dat.gui';