How to use npm modules on grunt? - javascript

Earlier when I was using node.js without grunt I had to simply write the following code to include an external module.
var express = require('express');
After I switched to grunt I am trying to use the following module qr-image.
I am stuck with the use of this module as whenever I use the following command my code breaks.
[ This is as per an official example. ]
var qr = require('../');
To Install this module in my node_modules directory I changed the package.json by adding the following dependency in
"devDependencies": {
.
.
.
"qr-image": "^2.0.0"
},
And then ran npm install command at the root directory level of my app.
Thus, Stuck with the implementation of this node.js qr-image module on grunt. Any help will be appreciated.

I believe the right way to do this is:
var qr = require('qr-image');
You can find an example in the project's readme.

Related

I have a trouble during npm loading module

I run this commands:
Matias#PC MINGW64 ~/Desktop/test2
$ npm init
[ ... ]
$ npm install
$ npm install neataptic --save
$ npm install chai --save
$ electron .
App threw an error during load
ReferenceError: neataptic is not defined
at Object.<anonymous> (C:\Users\Matias\Desktop\test2\neat.js:6:36)
[...]
The line 6 of the file neat.js is:
/* Shorten var names */
var { architect, Network, methods, config } = neataptic;
I tried also require('neataptic').
But I have that error.
Where am I wrong? Thank you
First off, I assume from your tags, that you're trying to run this in node.js.
From looking at the source, if the neaptaptic module is properly installed, you should be able to do this:
const { architect, Network, methods, config } = require('neataptic');
If, for some reason, that doesn't work, then you can debug what's doing on by doing this:
const neataptic = require('neataptic');
console.log(neataptic);
And, see what exports there are from that module.
Refer to the following Github issue link to get a solution, Thanks

Vue JS Module not found (datepicker)

I am pretty new to vue.js - I only started using it today and naturally I have run into an error I cannot seem to resolve.
I am using the v-md-date-range-picker module:
(https://ly525.github.io/material-vue-daterange-picker/#quick-start.
The instructions tell me to do the following:
1
npm install --save v-md-date-range-picker
2
<template>
<v-md-date-range-picker></v-md-date-range-picker>
</template>
3
<script>
import Vue from 'vue';
import VMdDateRangePicker from "v-md-date-range-picker";
import "v-md-date-range-picker/dist/v-md-date-range-picker.css";
Vue.use(VMdDateRangePicker);
</script>
So, I ran the command in terminal in my project folder, added the 2 bit of code to my HelloWorld.vue page and then added the code from step 3 into the main.js.
When I have a look in my package.json file, I see:
"dependencies": {
"core-js": "^2.6.5",
"v-md-date-range-picker": "^2.6.0",
"vue": "^2.6.10"
},
However, I get the error:
Module not found: Error: Can't resolve 'v-md-date-range-picker/dist/v-md-date-range-picker.css' in '/Users/James/Documents/projects/vue-test/src'
am I missing something blatantly obvious here?
Edit:
I tried the response in the comments below which did not work.
On the main page of the module, I followed the instructions. However, going through the pages I found the same instructions with some extra text:
I assume that you have a working bundler setup e.g. generated by the vue-cli thats capable of loading SASS stylesheets and Vue.js SFC (Single File Components).
I am going to go out on a limb here and say I do not have a working bundler. I went into the node_modules folder, found that module and looked inside. There was no dist folder. Just .scss files etc..
So, I assume that I somehow need to build this project first.
How do I do that?
I thought running it in the browser would have done this on the fly but it clearly has not.
Edit 2:
After some googling around I found the command:
$ npm run build.
Which gives me this error:
This dependency is not found, To install it, you can run: npm install --save v-md-date-range-picker/dist/v-md-date-range-picker.css
So, I run that command and then I get the error:
Could not install from "v-md-date-range-picker/dist/v-md-date-range-picker.css" as it does not contain a package.json file.
Check if you can find this in the webpack.base.conf.js inside the build folder. If not add it.
module: {
rules: [
{
test: /\.css$/,
loader: ['style-loader', 'css-loader'], // Note that the order is very important
},
Run npm install style-loader css-loader --save before adding it to the file if it isn't there.
To Address your question
Run the command: npm install sass-loader --save
Then add an import for every SCSS file in the module.
This is not the most optimal solution, but that package looks broken to me and this is merely a workaround.
I will take time to try out the library myself and try to provide a fix for it.
Create v-md-date-range-picker.css in v-md-date-range-picker/dist/ and copy css from
md-date-range-picker.min.css
and refresh your page. For some reason css file is not being created when we install md-date-range-picker.min

uglifyjs-folder remove console.log & alert from minified files

I am minifying multiple files in a folder using uglifyjs-folder in npm package.json like :
"uglifyjs": "uglifyjs-folder js -eyo build/js"
It is working as intended & minify all files in folder.
I want to remove any console.log & alert while minify but not able to find any option with uglifyjs-folderhttps://www.npmjs.com/package/uglifyjs-folder
Please help.
Short Answer
Unfortunately, uglifyjs-folder does not provide an option to silence the logs.
Solution
You could consider writing a nodejs utility script which utilizes shelljs to:
Invoke the uglifyjs-folder command via the shelljs exec() method.
Prevent logging to console by utilizing the exec() methods silent option.
The following steps further explain how this can be achieved:
Install
Firstly, cd to your project directory and install/add shelljs by running:
npm i -D shelljs
node script
Create a nodejs utility script as follows. Lets name the file: run-uglifyjs-silently.js.
var path = require('path');
var shell = require('shelljs');
var uglifyjsPath = path.normalize('./node_modules/.bin/uglifyjs-folder');
shell.exec(uglifyjsPath + ' js -eyo build/js', { silent: true });
Note: We execute uglifyjs-folder directly from the local ./node_modules/.bin/ directory and utilize path.normalize() for cross-platform purposes.
package.json
Configure the uglifyjs script inside package.json as follows:
{
...
"scripts": {
"uglifyjs": "node run-uglifyjs-silently"
...
},
...
}
Running
Run the script as per normal via the command line. For example:
npm run uglifyjs
Or, for less logging to the console, add the npm run --silent or shorthand equivalent -s option/flag. For example:
npm run uglifyjs -s
Notes:
The example gist above assumes that run-uglifyjs-silently.js is saved at the top-level of your project directory, (i.e. Where package.json resides).
Tip: You could always store run-uglifyjs-silently.js in a hidden directory named .scripts at the top level of your project directory. In which case you'll need to redefine your script in package.json as follows:
{
...
"scripts": {
"uglifyjs": "node .scripts/run-uglifyjs-silently"
...
},
...
}
uglify-folder (in 2021, now?) supports passing in terser configs like so:
$ uglify-folder --config-file uglifyjs.config.json ...other options...
and with uglifyjs.config.json:
{
"compress": {
"drop_console": true
}
}
And all options available here from the API reference.

How to pass browserify --require file to angular module?

I have engineered a build for an Angular SPA using NPM to call the browserify script to bundle it, i.e. you can run from the terminal npm run build:js which calls the following script in package.json:
"build:js": "browserify -r ./params-dev.js -e src/app/index.js -o build/index.js"
What I'm trying to do now is to create two different config objects for prod and QA. Each one will require a different file: params-dev.js or params-prod.js (like in the command above).
I am wondering how to access these variables in the resulting bundle? They are environment specific and some of it points to analytics codes, etc. Furthermore, I'm trying to move them out of the global scope, where they currently live.
Here is a sample of the params files I'd like to include with the bundles. There will be one for prod and one for QA:
var merge = require('merge'),
params = require('./params')
exports.config = merge(params, {
env: 'prod',
analyticsCode: 'blah08yweblah2e823lnblah',
otherProps: '...etc...'
})
So how do I access these variables now in my AngularJS module? I feel like I'm missing something obvious here.
Anyone have any ideas? Please let me know if you need more info.
In case it helps, my index.js looks like
(function () {
// common app require statements
require('blah')
require('blah-2')
angular.module('app', [require('angular-route')])
// etc etc
})()
I figured it out. :) If I add the target to the end of the required file path in the command like so:
"build:js": "browserify -r ./params-dev.js:params -e src/app/index.js -o build/index.js"
I can access the object by adding var params = require('params') to my angular file.

Adding chai-as-promised to an Ember app

I'm finding myself in an Ember-based app and are having a little trouble understanding how I should add the chai-as-promised helper library to it. I'm running this version:
$ ember --version
version: 2.4.2
node: 5.8.0
os: darwin x64
I started by installing via npm i chai-as-promised --save-dev. The library was then importable via Node. Then I have tried adding it to the ember-cli-build.js file using two different approaches:
As a file via .import(), after creating the EmberApp:
module.exports = function(defaults) {
var app = new EmberApp([...]);
app.import('./node_modules/chai-as-promised/lib/chai-as-promised.js');
Via EmberApp.toTree() to chai-as-promised's top directory:
return app.toTree('./node_modules/ember-cli-blueprint-test-helpers/');
And descending into the lib/ subdirectory of chai-as-promised:
return app.toTree('./node_modules/chai-as-promised/lib');
I also tried installing via Bower and changing the above node_modules/ based paths to bower_components ones, but still with the same result.
Am I importing it wrong? Or is there somewhere else I should import?
You need to tell ember-cli to add it to the test tree like this:
app.import("bower_components/chai-as-promised/lib/chai-as-promised.js",
{ type: 'test' });
otherwise it isn't available in the test suite but in the app. I got this to work in combination with ember-cli-mocha.
You can see how it works here: https://github.com/albertjan/ember-cli-chai-as-promised

Categories