I have a Node app using ES6 that I run with the following command nodemon cluster.js --exec babel-node.
I also have a .babelrc file :
{
"presets": ["es2015"],
"ignore": [
"public"
]
}
The folder public contains front-end files such as html, css and js. But when I edit a JS file within the public folder, babel-node compiles my code and I don't want this to happen.
I think it's related to this bug. Try using nodemon cluster.js --exec "babel-node --ignore public".
Related
I have this problem that is not letting me debug my website.
You dont have a 'start' script defined in your "scripts" section.
You could use the defined 'dev' script (npm run dev) or rename it to 'start'.
"scripts": {
"start": "nodemon src/index.js"
}
Tipp: Use npm run to list all available npm sripts
I have a folder of dynamically loaded asset files I want to include in my parcel output directory. How can I include unreferenced static asset files like .json, .jpeg, .txt, .etc with my parcel build command?
With Parcel v2 there's a different plugin: https://github.com/elwin013/parcel-reporter-static-files-copy
yarn add parcel-reporter-static-files-copy --dev
then you need to create .parcelrc or add to the following to it. (Note: "..." is literal not something you need to fill in):
{
"extends": ["#parcel/config-default"],
"reporters": ["...", "parcel-reporter-static-files-copy"]
}
now any files (and sub-directories) in a directory named static will be automatically copied to the website (typically your dist folder) when you do the regular parcel build.
Note: This answer is for Parcel v1
There is a parcel plugin for that:
https://www.npmjs.com/package/parcel-plugin-static-files-copy
Install it:
yarn add parcel-plugin-static-files-copy --dev
Or
npm install -D parcel-plugin-static-files-copy
Then, in package.json, add:
"staticFiles": {
"staticPath": ["path/to/a/staticFolder"]
}
It should copy your files to the public folder.
Stay safe!
The best way to handle this is having control of the code. npm already provides the tools needed for this job. In the package.json, when running commands with &&, the first command will run, and if it does finish without any error, the second command will also be executed. Running &, however, will run each command in the background independently, regardless of what happens to the other command.
In other words:
Use && for sequential execution.
Use & for parallel execution.
For example:
project/
|dist/
|...
|src/
|assets/
|text.txt
|memos.txt
|info.ini
|css/
|style.css
|img/
|a.png
|b.jpg
|c.jpeg
|data.json
|not-to-copy.json
|not-to-copy.conf
|index.js
|index.html
|package.json
If you have a project structure like this add, some scripts to the package.json
{
...
"source": "src/index.html",
"scripts": {
"clean-dist": "rm -rf dist && mkdir dist",
"copy-img": "cp -vR ./src/img ./dist",
"copy-data": "cp -r src/data.json dist",
"copy-assets": "cp -r src/assets/* dist",
"copy-files": "npm run copy-img & npm run copy-assets & npm run copy-data",
"init": "npm run clean-dist && npm run copy-files",
"start": "npm run init && parcel",
"build": "npm run init && parcel build"
},
...
}
This configuration will sequentially run clean-dist and copy-files. The former will delete the dist directory and make the directory again. Then copy-files will copy src/img -> dist/img, src/assets/* -> dist/* and src/data.json -> dist/data.json in parallel. Finally, parcel will be executed.
You can edit your package.json scripts to copy the files after the build has executed. This is how I had a .htaccess file to the dist folder:
"build": "rm -rf dist && parcel build src/index.html -d dist --public-url ./ '.' cp src/.htaccess dist"
I have a Node.js app using TypeScript and now I want Jasmine to run tests automatically each time I make changes in .ts files. So I'm just trying to find an appropriate command to be run as npm test in command line or a package that can watch my .ts files compile them on changes and run jasmine. Does anybody know a solution for it?
The easiest way I found is
installing dependencies: npm install --save-dev jasmine-ts nodemon
initializing jasmine: node_modules/.bin/jasmine-ts init
In the package.json:
"scripts": {
"test": "nodemon --ext ts --exec 'jasmine-ts \"src/**/*.spec.ts\"'"
}
Edit: the above solution doesn't work as of the 11th of Apr, 2019. I published a modified working example at https://github.com/erosb/ts-node-jasmine-example
This may be done with two commands launched in separate terminals. Assuming packages are installed in global mode.
First command launches TypeScript compiler in watch mode:
tsc --watch
The second starts nodemon that watches .js files and restarts on changes. Each time it executes jasmine test runner:
nodemon --ext js --exec 'jasmine JASMINE_CONFIG_PATH=jasmine.json'
This solution is fast enough though it also has a drawback of running in two terminals. So it is not ideal but the best I've found so far.
As a result scripts section in package.json looks like:
"scripts": {
/* ... */
"watch": "tsc --watch",
"test": "nodemon --ext js --exec 'jasmine JASMINE_CONFIG_PATH=jasmine.json'",
"devstart": "nodemon ./bin/www"
},
devstart also works in couple with watch restarting server each time .ts files are changed (after they are compiled to .js).
You might consider using jasmine-node. I don't think that jasmine itself has a watch option.
npm i -g jasmine-node
Assuming that your test command in your package.json scripts block is something like this:
"scripts": {
...
"test": "jasmine some-directory-or-glob-pattern"
...
}
Use jasmine-node and add the --autotest and --watch flags to that command:
"scripts": {
...
"test": "jasmine-node --autotest --watch some-directory-or-glob-pattern"
...
}
Previously described methods either did not work, or were slow to compile code. Here is my attempt to solve this, both fast and convenient, works great for me. The only downside is that jasmine would not know which tests are affected by TS recompilation and would run all the tests.
yarn add tsc-watch --dev
yarn run tsc-watch --onSuccess "yarn run jasmine --config=jasmine.json"
NPM version:
npm -i tsc-watch
npm run tsc-watch --onSuccess "npm run jasmine --config=jasmine.json"
In my case I needed to correctly map TS paths. The full command looks like this:
yarn run tsc-watch --onSuccess \
"node -r tsconfig-paths/register node_modules/jasmine/bin/jasmine \
--config=jest/jasmine.json --require=dist/jest/setup.js $targetFile"
jasmine.json
{
"spec_dir": "dist/src",
"spec_files": ["**/*.e2e.js", "**/*.unit.js", "**/*.spec.js", "**/*.test.js"],
"env": {
"random": false
}
}
Just an example, please adjust to your needs.
tsc-watch starts a TypeScript compiler with --watch parameter, with the ability to react to successful compilation and start tests.
I'm using typescript on my project and I can successfully watch + compile .ts files and output them to dist folder.
here is the scripts part of my package.json
"start": "npm run build && npm run watch",
"build": "npm run build-ts && npm run tslint",
"test": "cross-env NODE_ENV=test jest --watch",
"watch": "concurrently -k -p \"[{name}]\" -n \"Typescript,Node\" -c \"cyan.bold,green.bold\" \"npm run watch-ts\" \"npm run serve\"",
"serve": "nodemon dist/server.js",
"build-ts": "tsc",
"watch-ts": "tsc -w",
"tslint": "tslint -c tslint.json -p tsconfig.json"
The problem is I want to use js templating engine (nunjucks) and I need to watch the view files inside the views folder and move them to the dist folder.
Is there a way by just using npm scripts or nodejs?
Or do I need to use other tools like gulp or webpack?
I have the "same" request to for a CRUD graphql back-end server, but don't want to use gulp or webpack just to keep it simple.
I see that you use nodemon like me. Then, according the docs at https://github.com/remy/nodemon, it can be used it to monitor changes of any kind of file other than the default js. More over, nodemon can monitor the status of other transactional server other than node.
The first task is detecting the changes of wanted files: in my case I want copy the *.gql files in my src/schema folder to build/schema folder. For that, you can use the ext for the kind of files, and watch option for the source folder to explore.
The second one task is matter of copying the files. Naturally, you can use the copy command of your host OS. In my case I use the DOS xcopy command of the Windows shell (or cp in Unix like OS). nodemon has an "event-hook" with the event option, that can execute a command line when an event occurs. Just we need the restart event of the node server when the changes are detected for nodemon.
You can use the command line options, or a global config file, or in you local package.json project config file. I show up the last one using nodemonConfig section of package.json:
"nodemonConfig": {
"watch": [
"./src/schema",
"./build"
],
"ext": "js,gql",
"events": {
"restart": "xcopy .\\src\\schema\\*.gql .\\build\\schema /Y /O /R /F /I /V /E"
}
}
Ozkr's answer is great, I just want to add what worked for me, I had to change it a bit as nodemon was running into an infinite restart otherwise:
"nodemonConfig": {
"watch": [
"./views",
"./public"
],
"ext": "hjs,js",
"events": {
"restart": "cp -r views dist \n cp -r public dist"
}
}
copy-and-watch does just that:
I use this code to copy html files during development:
"copy_html": "yarn copy-and-watch src/mail_templates/* prod/mail_templates --watch --clean",
I'm trying to get my first ever node app ready for a production server.
build and serve scripts I'm basing on that given by babel
"scripts": {
"start": "nodemon --exec babel-node server.js --ignore public/",
"build": "babel server.js -o server_compiled.js",
"serve": "node server_compiled.js",
"dev": "webpack -wd"
}
npm run build
works as expected
npm run serve
results in an error:
some/path/config.js:3
export default{
^^^^^^
SyntaxError: Unexpected token export
This is from a config file that I'm referencing in server.js for port host and db.
Do I build this file also or what have I done wrong?
Any help appreciated.
So, I eventually figured out I had to compile all of the .js files in the app individually. I'm sure there must be automated way to do this but thought I'd leave the solution in case anyone can't find anything else.