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.

How to know if an npm package can be imported with ES6 import syntax?

Besides going through the documentation of the package and trial/error attempts, how can I know for sure if an npm packaged can be imported with the ES6 import syntax?
Is there a file inside the package folder that I can check?
I constantly question myself about this.
For example:
The md5 package DOCS only mentions md5 = require('md5'); but I've just tested and it works with import md5 from 'md5'
How can I inspect the package and know for sure?

Since you are using Babel and webpack, you can always use import. Webpack is taking care of transpiling the import statements in your code to include the code from the npm packages. I can't think of any case where import would not work while require would.

You must check if the module/package has a dist or a src folder. If the package has a dist folder, Then it can be imported using es6's import statement. Otherwise if it has a src folder, Then it can't be imported using es6's import statement and you must use cjs's require function to import such modules. If you try to import a cjs module using the import statement, You will get the following error:
Syntax Error: Cannot use import statement outside a module

How to install FlipDown.js library using Webpack?

I needed the FlipDown.js library for my project which uses Webpack.
I installed the library
npm i flipdown
But I don't know what should I do further to start working with the library.
How to import flipdown.css and flipdown.js to my style.less and index.js files, respectively?

Seems like flipdown.js does not have any default exports defined.
You could try the following;
index.js
import 'flipdown';
const countdown = new FlipDown();
console.log(countdown); // Is this what you expect it to be?
As for the styles:
#import 'flipdown/dist/flipdown.css`;

How to import an entire npm library into React Native, not just 1 file?

I've been trying to import the sjcl library, which has many files, but I'm only able to import 1 file from it.
From command line:
npm install sjcl --save
react-native link
In a RN JS file:
import sjcl from 'sjcl';
Looks like this doesn't import everything in the sjcl node package, it only imports file sjcl.js from node_modules/sjcl/. I also need sha1.js from node_modules/sjcl/core/sha1.js. I've tried various ways of importing it, but nothing works.
How can I import an entire npm library into a React Native project?

I had the same problem trying to load the ECC module, here is how I worked around it (I installed sjcl using npm). Create a file LocalExports.js in which put this
import sjcl from 'sjcl';
export {default as sjcl} from 'sjcl';
window.sjcl = sjcl;
then import like this in any other file
import {sjcl} from './LocalExports';
import 'sjcl/core/bn';
import 'sjcl/core/ecc';
*edit - I just found this link, which is the official way to do this
https://github.com/bitwiseshiftleft/sjcl/wiki/Getting-Started