There are some problems when I use eslint to produce a html report.
In my package.json I have the following configuration:
"eslint-html": "eslint --format html ./src/* -o ./dist/eslint/index.html",
The output in the file ./dist/eslint/index.html has a report for the following files:
src/App.vue
src/router/index.js
...
But no report for these files:
no src/components/pages/...
no src/components/*.vue
Why is there no output for any file in src/components/?
There are two problems.
First you are providing ./src/* as argument for eslint. This means: "all files in ./src". This does not include sub folders. To accept any number of sub folders provide ./src/**/*
The second problem is that eslint does not know how to lint .vue files. For that you can install and configure an eslint plugin for vue files. Here is one: https://www.npmjs.com/package/eslint-plugin-vue
Related
Basically I want CI to fail if the dependencies section of the package.json contains any range operator. devDependencies could contain anything thought. Some CLI command would be perfect. Any suggestions?
Short answer: Unfortunately, there is no existing built-in npm command/feature to achieve this. However, you can utilize your own custom nodejs script. The nodejs script can then be invoked via a command if you define it in the scripts section of your package.json.
The following describes how to achieve this.
Solution
check-deps.js
Create a nodejs script as follows. Let's name the script check-deps.js and save it somewhere in your project directory.
const isSemverRange = require('is-semver-range');
const pkgPath = './path/to/your/package.json';
const pkgData = require(pkgPath);
function hasSemverRange({ dependencies = {}}) {
return Object.values(dependencies).some(semver => isSemverRange(semver));
}
if (hasSemverRange(pkgData)) {
console.log(`Semver range(s) found in dependencies section of ${pkgPath}`);
process.exit(1);
}
Explanation of check-deps.js:
Firstly we require the is-semver-range package, which we'll use to help check for any semver ranges. To install this package; cd to your project directory and run the following command:
npm i -D is-semver-range
We then define a path to the package.json file (i.e. the file we want to check), and subsequently we require its contents.
const pkgPath = './path/to/your/package.json'; // <-- Redefine path.
const pkgData = require(pkgPath);
Note: you'll need to redefine your path to package.json as necessary.
The hasSemverRange function parameter definition utilizes object destructuring to unpack the dependencies object, and assigns an empty object as a default value to avoid errors occurring if the dependencies section is missing from package.json.
In the function body we pass in the dependencies object to the Object.values method, and utilize the Array.some() method to test whether at least one of the values is a semver range.
This function returns true if the value of any property/key of the dependencies object is as a semver range, otherwise it returns false.
Finally, in the if statement condition we invoke the hasSemverRange function, passing to it the parsed contents on package.json. If the condition is truthy we log an error message to the console, and exit the script with a non-zero exit code, i.e. process.exit(1).
package.json
In the scripts section of your package.json define a script as follows. Let's name the script check-deps:
"scripts": {
"check-deps": "node path/to/check-deps.js",
...
}
Note: you'll need to redefine your path to check-deps.js as necessary.
Running the npm script
Run the following command via your CLI to invoke the check-deps script:
npm run check-deps
If the value of any property defined in the dependencies section of your package.json is a semver range you'll see something like the following error logged to your console:
Semver range(s) found in dependencies section of ./path/to/package.json
Integrating the check with your CI tool.
It's unclear from your question which CI tool you're using. However, typically CI tools provide a feature which allows you to invoke an npm script.
For example, if your utilizing Travis CI you can define the script to run in your .travis.yml file as follows:
.travis.yml
script:
- npm check-deps
Additional Note:
You could also invoke the npm check-deps script via an existing test script which you may have already defined in your package.json by utilizing the && operator. For instance:
"scripts": {
"check-deps": "node path/to/check-deps.js",
"test": "yourCurrentTestcommands && npm run check-deps"
...
}
Note: In the test script above the yourCurrentTestcommands part should be replaced with any commands that you may currently be running.
I've installed npm (v4.4.4) and babel (v6.24.0) and babel preset 2015.
All running OK when converting ES6 JS to ES5...except a couple of oddities. Maybe someone can see what this newbie is doing wrong.
1) I run babel from npm (see below) which runs OK. I added some script entries into package.JSON to make it work.
But, UNWANTED oddity...npm inserts the commands into the output JS file. (See below) Is there an npm option to say, don't put the command in the output file.
Yet....if I copy input.JS to the folder with babel.cmd and run it there, I get a clean output.JS. So it looks like npm is inserting the command lines into the output.js file.
How do I prevent the npm commands being written to output.js. (Obviously I don't want to have my JS files having to share a folder with the .bin files)
2) When I type > babel on the command line in my project folder, I get:
babel: not a command.
I EXPECT THIS. After all, I have not added node_modules/.bin to my PATH env var. Yet every YouTube video I watch about npm and babel, it works. How? No one seems to edit the PATH env var. Am I missing something?
Thanks
Milton.
INPUT JS FILE (input.js)
class House {
constructor(v) {
this.name = v;
}
}
OUTPUT JS (TRANSPILED) FILE (output.js) Note 1st 2 lines below...
> milton#1.0.0 babel C:\Projects1\01InstallReact4Dev
> babel.cmd "--presets" "es2015" "input.js"
"use strict";
function _classCallCheck(instance, Constructor)
{ if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var House = function House(v) {
_classCallCheck(this, House);
this.name = v;
};
PACKAGE.JSON
"scripts": {
"babel": "babel.cmd",
"babelv": "babel.cmd -V",
"babelh": "babel.cmd -help"
}
COMMAND
> npm run babel -- --presets es2015 input.js > output.js
Thanks Again.
Milton.
You're redirecting the output of stdout to the file output.js, this includes everything that is displayed. Instead of using the stdout output of babel you can use the --out-file or -o option. This will write the output to the specified file instead of printing it to stdout (see Compile Files).
Your command would be:
npm run babel -- --presets es2015 input.js --out-file output.js
When I type > babel on the command line in my project folder, I get: babel: not a command.
You don't have node_modules/.bin/ in your shells PATH. You could add it or run it directly with ./node_modules/.bin/babel. But this is not necessary if you do it in an npm script, because npm will automatically look into node_modules/.bin/ without it being in your PATH. In this case you could define the following script:
"scripts": {
"build": "babel --presets es2015 input.js --out-file output.js"
}
And then you can simply run:
npm run build
If you'd like to transpile more than one file you should use --out-dir instead of --out-file otherwise they will be concatenated into one file. See also Compile Directories
I copied the js files from project https://github.com/videojs/video.js into a subfolder of my project.
I set up plenty dependencies and called browserify on the command line:
node ./node_modules/browserify/bin/cmd.js dev\videojs\js\video.js -t [ babelify ]
The output looks like:
Error: D:/Webs/videojs/dev/videojs/js/video.js: Cannot find module '../../package.json' from 'D:\Webs\videojs\dev\videojs\js'
at Function.module.exports [as sync] (D:\Webs\videojs\node_modules\resolve\lib\sync.js:33:11)
at PluginPass.MemberExpression (D:\Webs\videojs\node_modules\babel-plugin-inline-json\lib\index.js:27:45)
at newFn (D:\Webs\videojs\node_modules\babel-traverse\lib\visitors.js:276:21)
at NodePath._call (D:\Webs\videojs\node_modules\babel-traverse\lib\path\context.js:76:18)
at NodePath.call (D:\Webs\videojs\node_modules\babel-traverse\lib\path\context.js:48:17)
at NodePath.visit (D:\Webs\videojs\node_modules\babel-traverse\lib\path\context.js:105:12)
at TraversalContext.visitQueue (D:\Webs\videojs\node_modules\babel-traverse\lib\context.js:150:16)
at TraversalContext.visitSingle (D:\Webs\videojs\node_modules\babel-traverse\lib\context.js:108:19)
at TraversalContext.visit (D:\Webs\videojs\node_modules\babel-traverse\lib\context.js:192:19)
at Function.traverse.node (D:\Webs\videojs\node_modules\babel-traverse\lib\index.js:114:17)
When I move the files one folder up, the command runs and and transpiles all the files.
I now wonder where this error comes from. babel-traverse seemingly loops through the plugins and eventually finds out it's being run not exactly 3 levels below the project root. Is this intended behaviour? It this a matter of babel, browserify, a plugin or videojs?
Use this command instead:
./node_modules/.bin/browserify dev\videojs\js\video.js -t [ babelify ]
When Browserify is installed, the command line scripts are added to node_modules/.bin, as that's the standard practice. It's those commands that you should be running; not the scripts in Browserify's own bin directory.
Note that the scripts are either shell scripts or Windows CMD scripts and that they are not run using node.
Or, if you add the following to your package.json, you can run Browserify using NPM (also standard practice):
{
...
"scripts": {
"browserify": "browserify"
}
}
and the command would then be:
npm run browserify dev\videojs\js\video.js -t [ babelify ]
Or, if you want to keep the parameters in the "scripts" configuration:
{
...
"scripts": {
"bundle": "browserify dev/videojs/js/video.js -t [ babelify ]"
}
}
and:
npm run bundle
I'm having some issues on Windows env. with npm & a package.json, mainly with one of the devDependencies, concat-cli.
Here's a little sample of the package.json file:
...
scripts{
...
"js-vendor-concat": "concat-cli -f src/js/vendor/**/*.js -o dist/js/vendors.js",
...
}
....
"devDependencies": {
...
"concat-cli": "^4.0.0"
...
}
So what happens is that every time I run that script in Windows env, I get Error: Error: EISDIR: illegal operation on a directory, read at errorHandler (index.js:11:15). Thing is that on linux, this error doesn't come up.
Things tried so far:
used git-bash and cygwin but same outcome
changed the input path to: src/js/vendor/*.js, again same outcome
However if I specify the name of the file, it works, so I'm guessing its something related to that wildcard *.js selector?
Any tips or pointers are much appreciated, thanks!
I have using browserify for new project. It works really well so far.
I have one big issue though. How can I debug each js file separately. It bundles all the files together and points to bundle if error occurs.
I am using chrome and source maps but it doesn't really help in debugging.
Any ideas?
Update: More info:
I'm using this command in package.json
"start": "watchify scripts/main.js -o scripts/bundle.js --debug",
and getting errors as shown above which is not ideal.
I believe my source maps are on?
I'm not exactly sure how you are using the command line tool for browserify without any code, but you you should be able to utilize debug.
--debug -d Enable source maps that allow you to debug your files
separately.
browserify main.js -o bundle.js --debug
For more info on the CLI tool you can look here - https://github.com/substack/node-browserify#usage
Edit After a bit more digging on this - the issue specifically being hit here is a ParseError - which means that Browserify is never actually getting to the proper debug stage. Hadn't really thought it through, but this made perfect sense.
In order to test this - I create two simple files:
a.js
module.exports = function(a) {
return a;
}
main.js
var a = require('./a.js');
console.log(a("something"));
I then ran browserify using watchify with an npm script:
"start": "watchify main.js -o bundle.js --debug"
Using the script in a browser, and everything worked great - it logged to console as expected. I then edited a.js with a typo:
a.js
module.exports = function(a) {
return a---
}
The browser and watchify threw the error shown above: path/to/file/a.js:3 ParseError: Unexpected Token.
Browserify is not able to compile the file properly, so it's throwing an error. You should be seeing this in the console during the build.
To test that the --debug flag works as expected, I modified the code again:
a.js
module.exports = function(a) {
return a('something');
}
The expectation here would be a TypeError since the function now expects a to be a function.
The console in the browser now displays:
Uncaught TypeError: a is not a function __________ a.js:2
Fix your parse issues, and browserify --debug will once again start behaving as expected.