I've created a Yeoman custom generator. Within the index.js file I want to perform some text replacement on some files. In package.json I have added the dependency replace then when I require('replace') in index.js and run the generator, I get the error Cannot find module 'replace'. I have tried different modules from NPM and running the generator fails for all of them - it fails to find the module.
The appropriate part of package.json
"dependencies": {
"replace": "~0.2.9",
"yeoman-generator": "~0.16.0",
"chalk": "~0.4.0"
},
Start of index.js
'use strict';
var util = require('util');
var path = require('path');
var yeoman = require('yeoman-generator');
var chalk = require('chalk');
var replace = require('replace');
var MyGenerator = yeoman.generators.Base.extend({
init: function () {
this.pkg = require('../package.json');
The generator fails when it hits the Replace require. Chalk and Yeoman Generator don't fail and they're loaded in the same way.
Why don't my added modules load?
Did you run npm install after manually adding that line to package.json? The preferred way to install a package is by running: npm install --save _package_. It will download the latest release, and save it to your package.json.
Related
I am trying to compile my vue component to unit test it.
I added the import { render } from "#vue/server-test-utils"; line at the beginning of my test file. I also run the command npm i --save-dev #vue/server-test-utils which completed successfully. I checked the node_modules folder that the dependency was indeed installed.
But still when I run the test file I am getting the error:
WEBPACK Failed to compile with 1 error(s)
Error in ./node_modules/#vue/server-test-utils/dist/vue-server-test-utils.js
Module not found: 'vue-server-renderer'
Here I found a similar issue. I tried adding the
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.isServerBuild = false;
return options;
});
}
to my webpack config, but it did not help.
I am using Vue 2. Maybe someone happened to stumble across this issue and knows a solution?
npm install --save-dev vue-server-renderer #vue/server-test-utils worked.
It seems that we have to install the two packages: the vue-server-renderer and then the #vue/server-test-utils.
I would like to develop an NPM module that the user can import in his project.
The module contain a full administration panel created with Nuxt.
I don't want the user know anything about Nuxt, he just need to run a command like:
myppcommand start
and the application starts a server that is running the administration panel.
So my idea is to develop the NPM module with Nuxt. Generate all the static file inside ./dist folder and then myappcommand start will serve the app from node_modules.
// NPM Package myapp
// nuxt.config.js
export default {
components: [
{
path: '~/components/',
extensions: ['vue']
}
],
buildDir: './.nuxt',
srcDir: './src/',
target: 'static',
ssr: false,
generate: {
dir: './dist/'
}
};
// NPM Package myapp
npx nuxt generate
The command will generate all files in ./dist folder.
// User repo
npm install myapp
This will install myapp inside ./node_modules.
// User repo
cd node_modules/myapp/ && npx nuxt start -c nuxt.config.js
This will start the server and serve the app.
But is this the best way possible? It seems a bit hacky to me, to go inside node_modules, does somebody know a better way?
You could achieve this by declaring that your package has an executable file which starts Nuxt, in the bin property of package.json.
Firstly, create an executable script to start the app:
bin/start.js
#!/usr/bin/env node
// Based on node_modules/.bin/nuxt
global.__NUXT_PATHS__ = (global.__NUXT_PATHS__ || []).concat(__dirname)
require('#nuxt/cli').run(['start'])
.catch((error) => {
require('consola').fatal(error)
process.exit(2)
})
You can verify that this starts the app by running ./bin/start.js (provided you have made the file executable), or node ./bin/start.js.
Then, declare that your package should install this as a script when installed as a dependency:
package.json
{
"bin": {
"myapp": "bin/start.js"
}
}
When your package has been installed with npm install myapp, then node_modules/.bin/myapp will link to node_modules/myapp/bin/start.js and the user will be able to run it with npx myapp.
Im trying to write my first test in Jest and cannot make my configuration run with a Vue Component.
In my Laravel Project I installed the needed npm packages with following commands:
npm install -—save-dev jest vue-jest jest-serializer-vue
npm install #vue/test-utils
In my package.json i have following configurations:
"scripts": {
...
"test" : "jest"
}
...
"jest": {
"testRegex": "tests/Javascript/.*.spec.js$"
},
My test is in the given Directory "root/tests/Javascript/Mytest.spec.js".
My test looks like this:
import { mount } from '#vue/test-utils';
// If this is removed it works....
import MyVuePage from './../../resources/js/pages/MyVuePage.vue';
describe('Something', () => {
it("Awesome", () => {
expect(1).toBe(1);
});
});
I get following Error:
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with >the "moduleNameMapper" config option.
In the Console there is a little Arrow Pointing on my "i" of "import SeriesVersion from './../../resources/js/pages/MyVuePage.vue';"
I run the test by writing "npm run test" into the console.
Can you tell me what im doing wrong?
I am trying to create some tests using K6 framework from LoadImpact, but I am struggelig with including external NPM module following the instructions on their documentation site.
On loadImpacts documentations site they include a detailed example on just what I am after, modules that enable me to parse xml from a soap service response. But, I am unable to get this working! Now, I am a total javascript newbie, but I have been coding for many years and would really like to solve this.
The can be found here: https://docs.k6.io/docs/modules#section-npm-modules
can anyone get this working? I need to run this on servers isolated from the Internet, so I am totaly dependent on creating the packages and transfer the required files.
According to the documentation a package is created like this
-- bundle `cheerio` npm module
git clone git#github.com:cheeriojs/cheerio.git
npm install browserify index.js -s cheerio > cheerio.js
My first question: In the folder I am residing when running this command a 'cheerio.js' file is created along with a a 'cheerio' folder and a 'node_modules' folder.
the cheerio.js in my "root" directory only contains the following:
+ cheerio#0.22.0
+ index.js#0.0.3
+ browserify#16.2.3
updated 3 packages and audited 2829 packages in 2.221s
found 0 vulnerabilities
Back to LoadImpacts example on how to reference this package in a k6 javascript:
import cheerio from "./vendor/cheerio.js";
export default function()
{
const res = http.get("https://loadimpact.com/");
const $ = cheerio.load(res.body);
What file is this, and where in the structure generated by browserify can I find it? I have tried to change this to point to 'index.js' in the 'cheerio' folder or cheerio.js found in 'cheerio/lib'. I will then receive a complaint about the first line in cheerio.js which defines a "parse" variable it cannot find:
var parse = require("./parse'),
if I change this to
var parse = require("./parse.js')
it goes on to complain about missing 'htmlparser2' which I can also find in this structure, but it seems like the entire dependency structure is not working.
Can anybody give me some guidance on how to create a browserify package with dependencies for cheerio and how/what I need to copy to my k6 project to make this work like on the loadImpact site.
The k6 docs for this definitely need some clarification, which I'll later do. The vendor folder currently mentioned there isn't something special, the docs are just missing a step to copy the cheerio.js and xml2js.js files that were generated by browserify to a new vendor folder in your k6 project.
For now, I'll try to offer a simplified explanation on how to achieve the same thing in a simpler way:
Create a new empty folder and go to it in a terminal
Run npm install browserify cheerio there (ignore the npm warnings about missing package.json or description)
Run ./node_modules/.bin/browserify ./node_modules/cheerio/ -s cheerio > cheerio.js in that folder
The resulting cheerio.js file in the folder root should be the file you import from the k6 script:
import http from "k6/http";
import cheerio from "./cheerio.js";
export default function () {
const res = http.get("https://loadimpact.com/");
const $ = cheerio.load(res.body);
console.log($('head title').text())
}
That should be it for a single npm library.
And if you need to use multiple npm packages, it might be better to invest some time into bundling them in a single browserified .js file. For example, if you need both the cheerio and the xml2js libraries mentioned in the k6 docs, you can do something like this:
Create a new empty folder
Add something like the following package.json file in it:
{
"name": "k6-npm-libs-demo",
"version": "0.0.1",
"description": "just a simple demo of how to use multiple npm libs in k6",
"main": "npm-main.js",
"dependencies": {},
"devDependencies": {
"browserify": "*",
"cheerio": "*",
"xml2js": "*"
},
"scripts": {
"install": "./node_modules/.bin/browserify npm-main.js -s npmlibs > vendored-libs.js"
},
"author": "",
"license": "ISC"
}
Of course, if you need different libraries than cheerio and xml2js, you need to adjust the devDependencies options.
Add an npm-main.js file like this (again, adjusting for the libraries you want):
exports.xml2js = require('xml2js');
exports.cheerio = require('cheerio');
Open that folder in a terminal and run npm install. That should result in the creation of a vendored-libs.js file in the root of the folder, which you can use in k6 like this:
import http from "k6/http";
import { cheerio, xml2js } from "./vendored-libs.js";
export default function () {
const res = http.get("https://loadimpact.com/");
const $ = cheerio.load(res.body);
console.log($('head title').text())
var xmlString = '<?xml version="1.0" ?>' +
'<items xmlns="http://foo.com">' +
' <item>Foo</item>' +
' <item color="green">Bar</item>' +
'</items>'
xml2js.parseString(xmlString, function (err, result) {
console.log(JSON.stringify(result));
});
}
My project is .NET Core MVC where I have used Bower to manage Bootstrap, jQuery etc. Now Bower is going away, how I can migrate them to NPM or Yarn/Webpack as suggested by Bower?
Ok after few research, I kind of find a way that worked out for me. Here are my steps
Install gulp thru NPM (add below entries in package.json)
"gulp": "^3.9.1",
"gulp-uglify": "3.0.0",
"gulp-concat": "2.6.1",
"gulp-cssmin": "0.2.0",
"rimraf": "2.6.2",
"lodash": "4.17.4",
Then also add other package dev dependencies (as we need to move away from bower). something like
"bootstrap": "3.3.7",
"jquery": "3.2.1",
"jquery-validation": "1.17.0",
"jquery-validation-unobtrusive": "3.2.6",
"fontawesome": "4.7.2"
Now NPM will download all packages to node_modules under the project root folder - you can see them by navigating to the windows folder browser or by opting for show all files in VS
Now next step is set up tasks in gulp task runner. For that add gulpfile.js from add new item directly under web project. Once file added we havce to define gulp taks that will run at build.
Bellow is a sample file that does 3 task - copy packages from node-modules to wwwroot/lib/_app and clean/minify css and js file. And all tasks been configured to run as build process which is manged under VS task runner
/// <binding BeforeBuild='clean, clean:css, clean:js, min, min:css, min:js, copy-assets' Clean='clean, min:js, clean:css, copy-assets' />
"use strict";
var _ = require('lodash'),
gulp = require("gulp"),
rimraf = require("rimraf"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
uglify = require("gulp-uglify");
var paths = {
webroot: "./wwwroot/"
};
gulp.task('copy-assets', function () {
var assets = {
js: [
'./node_modules/bootstrap/dist/js/bootstrap.js',
'./node_modules/jquery/dist/jquery.min.js',
'./node_modules/jquery/dist/jquery.js',
'./node_modules/jquery-validation/dist/jquery.validate.min.js',
'./node_modules/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js'
],
css: ['./node_modules/bootstrap/dist/css/bootstrap.css']
};
_(assets).forEach(function (assets, type) {
gulp.src(assets).pipe(gulp.dest("./wwwroot/lib/_app/" + type));
});
});
//gulp.task("copy-assets");
paths.js = paths.webroot + "js/**/*.js";
paths.minJs = paths.webroot + "js/**/*.min.js";
paths.css = paths.webroot + "css/**/*.css";
paths.minCss = paths.webroot + "css/**/*.min.css";
paths.concatJsDest = paths.webroot + "js/site.min.js";
paths.concatCssDest = paths.webroot + "css/site.min.css";
gulp.task("clean:js", function (cb) {
rimraf(paths.concatJsDest, cb);
});
gulp.task("clean:css", function (cb) {
rimraf(paths.concatCssDest, cb);
});
gulp.task("clean", ["clean:js", "clean:css"]);
gulp.task("min:js", function () {
return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
.pipe(concat(paths.concatJsDest))
.pipe(uglify())
.pipe(gulp.dest("."));
});
gulp.task("min:css", function () {
return gulp.src([paths.css, "!" + paths.minCss])
.pipe(concat(paths.concatCssDest))
.pipe(cssmin())
.pipe(gulp.dest("."));
});
gulp.task("min", ["min:js", "min:css"]);
This works fine when working locally on VS. But we need to configure csproj show that it can be worked during VSTS build process. This will be done by adding below config in web .csproj
<Target Name="buildName" BeforeTargets="Build">
<Exec Command="npm install" />
<Exec Command="gulp clean" />
<Exec Command="gulp copy-assets" />
<Exec Command="gulp min" />
</Target>
Now all good - during build all necessary packages will be copied under wwwroot/lib/_app and you can point your css/js ref to there such as below in _Layout.cshtml
<link href="~/lib/_app/css/bootstrap.css" rel="stylesheet" />
I used the steps outlined in this article and it worked perfectly https://itnext.io/bower-to-yarn-migration-simple-steps-2a5ad0c43281
STEP 1 — Install yarn
npm i yarn -g
Install yarn globally using above command then verify installation by running yarn -v command.
STEP 2 — Install bower-away
npm i bower-away -g
We also need to install bower-away package globally and then navigate to your project directory and run following command
bower-away
this step will examine the bower.json and move the bower_components to package.json file and prepare it for user preview.
STEP 3 — Preview Changes
bower-away --diff
STEP 4 — Apply changes
bower-away --apply
Now apply changes using above command and then we need to delete bower_components folder from our project.
For Mac/Linux — rm -rf client\bower_components
For Windows — Remove-Item -Path .\client\bower_components\ -Force
STEP 5 — Install new modules
yarn
before you run the last yarn command:
One thing to mention that the article doesn't tell you, if using for .net MVC project create a .yarnrc file in the same directory as the package.json file , then add this to the .yarnrc file to have to install the packages to the wwwroot folder:
--modules-folder wwwroot/lib