Given the following minimal package.json:
{
"babel": {
"presets": ["es2015"],
"ignore": [
"b",
"c",
"node_modules"
]
},
"devDependencies": {
"babel-cli": "^6.8.0",
"babel-preset-es2015": "^6.6.0"
},
"scripts": {
"transpile": "babel *.js **/*.js --out-dir c"
}
}
And a directory structure:
foo.js
a/
bar.js
b/
baz.js
npm run transpile steams through every directory, including the output directory if it exists:
foo.js -> c/foo.js
a/bar.js -> c/a/bar.js
b/baz.js -> c/b/baz.js
c/foo.js -> c/c/foo.js
What am I missing about the behaviour of the ignore option? --ignore node_modules,b,c on the command line works marginally better, although if an --out-dir is specified it seems only to respect the first argument.
Edit: per immediately above, the accepted answer to Babel ignore several directories does not solve the problem. Specifying an output directory seems somehow to cause all but the first directory specified to --ignore to be dropped from the list. In any case it doesn't explain why the .babelrc option seemingly has no effect... it's always tempting to cry 'bug', but I wondered if I'd missed something.
Per the comment above, there's a bug logged at https://phabricator.babeljs.io/T6726. However it seems that the way to work around using the command line syntax is to avoid globs altogether. Instead of:
babel **/*.js --ignore b,c --out-dir c
I've had some success with:
babel . --ignore b,c --out-dir c
Related
I want to use lint-staged to run hooks only on staged files in a node.js project. The docs suggest adding the following code to the package.json file;
{
"lint-staged": {
"*": "your-cmd"
}
}
I have also seen the following code elsewhere in another codebase;
"lint-staged": {
"**/*": "prettier --write --ignore-unknown"
}
What purpose does the asterisk(s) serve? I don't suppose it's simply a placeholder. Thanks for the help.
As the readme says, those are glob patterns.
"*": "your-cmd"
will match any file (* matches anything by definition)
"**/*": "prettier --write --ignore-unknown"
will match:
** - "≥ 0 characters crossing directory boundaries", followed by
/ - A directory boundary, followed by
* - Anything
Early days in the development of my first npm script, and struggling somewhat. I'm on Ubuntu LTS with the latest nvm, node, npm and pnpm releases.
Node + npm have been installed using nvm, pnpm installed using npm, and several modules installed locally (i.e. without the -g flag) using pnpm. No sudo was necessary. The resulting package.json:
{
"name": "javascript-development-environment",
"version": "1.0.0",
"description": "JavaScript development environment cobbled together using various online sources",
"scripts": {
"prestart": "./node_modules/.bin/babel buildScripts/startMessage.js",
"start": "./node_modules/.bin/babel buildScripts/srcServer.js"
},
"author": "Laird o' the Windy Waas",
"license": "MIT",
"dependencies": {
"#babel/polyfill": "^7.0.0"
},
"devDependencies": {
"#babel/cli": "^7.1.5",
"#babel/core": "^7.1.6",
"#babel/preset-env": "^7.1.6",
"chalk": "^2.4.1",
"express": "^4.16.4",
"open": "^0.0.5",
"path": "^0.12.7"
}
}
With only Firefox 60.0.1 installed, on doing a 'pnpm start' using node, a browser window is opened "Hello World!" displayed, and terminal control has to be regained using a CTRL-C. -> All ok.
If I substitute in babel using the path as shown above (which results from the same issues described in this post), the buildScripts code is echoed to the terminal, but no browser window opens, and terminal control is released immediately on completion. The npm debugger provides no useful feedback. -> Something not working..
As the "Hello World!" code is traversed correctly using node (and remains unchanged for the babel traversal), it is not the source of the problem.
Here my babel config files:
.babelrc
{
"presets": [
"#babel/preset-env"
]
}
babel.config.js
const presets = [
[
"#babel/env",
{
targets: {
edge: "17",
firefox: "61",
chrome: "67",
safari: "11.1",
opera: "56"
},
useBuiltIns: "usage"
},
],
];
module.exports = { presets };
The problem looks to be that babel is not passing the transpiled code on to nodejs / express. Bound to be something simple, but I'm just going round in circles..
One thing I found myself asking is whether there might be a conflict between the various env presets across .babelrc, babel.config.js and package.json. Successive parking of the .babelrc and babel.config.js files, however, brought no change/advance.
I have also noticed that both (nvms) node and (ubuntus) nodejs are currently installed:
$ which node
/home/<myusername>/.nvm/versions/node/v10.13.0/bin/node
$ which nodejs
/usr/bin/nodejs
However, as everything to do with node and npm was installed using nvm, this shouldn't be a problem.
I could, I suppose, try installing babel globally, but with this widely frowned apon. I'd prefer a solution reflecting 'best practice'.
Thanks for any suggestions.
In earlier years, tutor material suggested babel-node would start npm / node (and hence express) on the user's behalf.
babel-node now no longer seems to be recognised. Attempts at using the babel-node command failed, and simply using node in it's place resulted in the transpiler output being dumped to the terminal.
babel, (in our case) pnpm, and node now have to be explicitly called, the latter referencing the transpiled code. node appears to handle interfacing with express.
After some experiment, therefore, the following changes (in package.json) appear to work fine:
"scripts": {
"prestart": "./node_modules/.bin/babel buildScripts/startMessage.js -d dist",
"build": "./node_modules/.bin/babel buildScripts/srcServer.js -d dist",
"start": "pnpm run build && node dist/startMessage.js && node dist/srcServer.js"
},
These result both in a tidy console output and result in "Hallo World!" being displayed in a freshly opened browser window.
Just hope this is of use to someone else.. ;-)
I am trying to create a test environment which all source file is side by side with its test code. This is due to easy to track which file is without its test code. Below is the example of my directory after run build
built/api/a.js
built/api/a-test.js
built/api/b.js
built/api/b-test.js
built/index.js
built/index-test.js
built/node_modules/...
built/package.json
src/api/a.js
src/api/a-test.js
src/api/b.js
src/api/b-test.js
src/index.js
src/index-test.js
src/package.json
package.json
I am going to run my test by run 'npm test', below is my package.json content:
{ "name": "sample",
"scripts": {
"build": "babel ./src -d ./built && cd built && npm install",
"test": "mocha built/**/*-test.js"
},
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-core": "^6.18.0",
"mocha": "^3.1.2"
}
}
My question is how can I skip those files in node_modules folder coincidently have name end with -test.js
A little late to the party (13+ months!?), but...
Mocha doesn't support this out of the box. You need to use your glob-fu and get a little fancy. Running something like this on your command line should do the trick:
mocha './built/{,!(node_modules)/**}/*-test.js'
The glob pattern {,!(node_modules)/**} says
Take entries in the current directory, or in any subdirectory of the current directory, regardless of depth, except for ones rooted in ./build/node_modules.
Note that the single quotes are essentially required on OS X or Linux boxen. Left as a bareword (unquoted), or quoted with double quotes, you'll get shell globbing instead of the internal glob() used by mocha, so you're unlikely to get the results you might expect... unless you have an atypical shell.
The Windows shell only supports double quoting... and it doesn't have command line globbing, so on Windows, you'll probably want to leave this unquoted (but don't, err, quote me on that).
A better, more platform-agnostic way would be to put the glob pattern in your test/mocha.opts file, thus:
--require ./test/setup.js
--colors
--inline-diffs
./built/{,!(node_modules)/**}/*-test.js
Cheers!
mocha '**/*-test.js' --ignore 'built/node_modules/**/*'
Another alternative to the existing answers... for those who use a mocha config file (.mocharc.js), you can include the ignore parameter:
{
ignore: 'built/node_modules/**/*'
}
Calling this with mocha --config .mocharc.js built/**/*-test.js
I have two questions.
Question #1
I'm writing npm package on ES6 and have following package.json:
{
"name": "mypackage",
"bin": {
"mybin": "dist/bin/mybin.js"
},
"dependencies": [...],
"devDependencies": [...],
"directories": {
"lib": "dist"
},
"main": "dist/index.js",
"scripts": {
"compile": "./node_modules/.bin/babel ./src --optional runtime --presets es2015,stage-0 -d ./dist",
"prepublish": "npm run compile"
}
}
Everything is compiled successfully every time.
However, I can include:
var mypackage = require('mypackage');
But I'm not able to include subfolder with the same starting path:
var constants = require('mypackage/core/constants');
Of course constants.js has following full path mypackage/dist/core/constants.js
But I would like to include it without dist part..
For now to include constants I should write like this:
var constants = require('mypackage/dist/core/constants');
Which doesn't make a lot of sense.
I don't like approach when I should use NODE_PATH to solve this issue.
I need solution without making users extra-efforts to include dist folder contents.
At least users should not rely to compilation/publishing folders structure, they should not even know anything about this.
Question #2
How can I compile all the .es6 files to dist and then copy all the other files except compiled from src to dist?
For example, I have different templates, assets, etc.
I would like structure of dist to be exactly the same including all the files as in src but .es6 compiled to .js.
I know obvious solution to copy entire src to dist and then compile everything from dist to dist, but it doesn't look like a smart way for me.
On the other hand, I wouldn't like to specify every single asset/image/template to copy to dist folder.
May be there's gulp plugin to make exact copy from folder to folder but excluding all the files with given extension (or regexp)?
Update #1
#molda
I have also structure inside:
-- src/modules
---- module1
-------- static
---- module2
-------- static
So keeping all the static files in src/static isn't solution
I'm trying to get npm to do a build browserify on a folder of scripts. The problem is, I'm on windows and doing folder/*.js doesn't seem to work. I've tried globally installing glob, but whenever I run a build command, the error comes back saying "Cannot find module 'c:\www\project\static\js\components*.js'.
Here's my package.json:
{
"name": "TEST",
"description": "ITS ME MARIO",
"author": "JJ",
"version": "0.0.1",
"dependencies": {
"connect": "1.8.5",
"express": "2.5.2",
"jade": "0.20.0",
"mongoose": "3.8.x",
"socket.io": "0.8.7"
},
"devDependencies": {
"vows": "0.5.x",
"mocha": "*",
"should": "*",
"jshint": "latest",
"browserify": "latest",
"rimraf": "latest",
"hashmark": "latest",
"stylus": "latest",
"glob": "latest"
},
"scripts": {
"clean": "rimraf dist",
"test": "mocha test/",
"build:components-js": "browserify static/js/components/*.js > static/dist/components.js",
"build:app-js": "browserify static/js/script > static/dist/app.js",
"build:css": "stylus static/css/style.styl > static/dist/main.css",
"build": "npm run build:css && npm run build:components-js && npm run build:app-js"
},
"engine": "node >= 0.6.6"
}
Anyone know what I'm doing wrong?
I don't think you're doing anything wrong; this is basically a limitation of the Windows shell/console/command prompt, although browserify could be 'improved' to sidestep that and use glob / node-glob instead. I'm not sure about browserify, but jshint is similar.
Some ideas:
Try passing the root directory name instead. That's less powerful but seems to work well enough with jshint:
https://github.com/jshint/jshint/issues/1904
Use cygwin as the shell you run npm from. It brings much *nix power to Windows.
Tweak or request a tweak to browserify (and jshint, and... ?) so that they invoke the glob library to handle these file-related parameters. Compare:
https://github.com/jshint/jshint/issues/1998
Wrap said tools with 'translators' such https://www.npmjs.com/package/build-jshint . Note that this is explicitly designed to support ** wildcards etc.
Just guessing, but there might also be a way to
use PowerShell (which comes with recent versions of Windows--see the Get-ChildItem command)
or Hamilton C shell (uses ... instead of **, I think), or something else, as your shell.
use a loop with /r for recursing into subfolders. I'm not recommending this--Windows-specific, not very chainable--but the 'wint' command set up below does 'work' (invoke with npm run wint) if I include the following in my package.json file.
loop for Windows (Note: redirecting the output below to a file isn't a simple > because ...do jshint %f > chk.txt will overwrite itself and ...do jshint %f > %f.chk.txt may generate many chk.txt files sprinkled around):
"scripts": {
"lint": "jshint **.js",
"wint": "for /r %f in (*.js) do jshint %f",
},
But the commands above would generally not be usable cross-platform. Also, using an alternative shell, you don't benefit by default from being able to shift+right-click on a folder and "Open command window here".
Related:
Cannot use GLOB with JSHint in Windows?
https://superuser.com/questions/358863/wildcard-for-all-subdirectories-or-all-descendent-directories-in-windows-command