I'm setting up a new project with nodejs, express, typescript, and babel. So I use babel for faster transpile typescript code and etsc for types checking
When I writing code, I'd like to the application applied changes automatically without me manually restart the application. My solution is running babel cli for transpile code with nodemon.
My script is like this
"scripts": {
"ts-check": "tsc --noemit",
"build-ts": "etsc",
"build": "rm -rf dist && yarn run build-ts",
"dev": "nodemon --exec babel src --out-dir dist --extensions \".ts\" --source-maps inline",
"start": "node ./dist/src/index.js"
},
But the problem is the application keeps restart even when I don't make any changes to the code. So how do I solve that?
Is there a better solution for applied changes automatically?
Here is what I got
The first problem is nodemon runs only babel command and not your ./dist/src/index.js. And the second problem is babel being run transpiles your .ts files into .js and then nodemon notices .js files changed and reruns your command (babel) that again transpiles your .ts files into .js ones with new timestamps. And I believe you've got the idea.
So in fact you need two serapate but dependent things: recompile your .ts files into .js ones, and restart node only when .js files changed.
You may achive that with something like that:
"scripts": {
...
"dev": "babel src --watch --out-dir dist --extensions .ts --source-maps inline & nodemon"
...
So you're starting simultaneously both babel in watch mode and nodemon. When there are changes in .ts files babel will recompile them into .js and when there are changes in .js files nodemon will restart node.
There is a minor drawback however. On the first run while there is no ./dist/src/index.js file nodemon will throw an error. It's not critical, nodemon will continue to run. And just after babel finished transpiling code nodemon will pick up the changes and go on without issues.
Though if you do not want to see that error in console you may include a delay before nodemon starts. Just long enough for babel to finish it's first run.
"scripts": {
...
"dev": "babel src --watch --out-dir dist --extensions .ts --source-maps inline & sleep 5 && nodemon"
...
Related
I am running the node js application. In package.json I am building the file like below and running with the start command from package.json.
"scripts": {
"build:server": "npx babel server --out-dir dist/server",
"start": "node ./dist/server/app.js",
"build:client": "webpack"
}
When I execute the build command, the changes were available in the dist folder. But I run the start command I am not able to see my changes on executing my Rest API call.
In a nodejs express.js application, and trying to build the app using babel for cross browser compatibility.
package.json scripts:
"scripts": {
"start": "node dist/app.js",
"build": "babel src -d dist"
}
On running npm build and check my build folder everything builds correctly except my non-js files like [.html,.css,.ejs]. At the moment just copied those file to the build folder in their respective sub directories and everything works fine.
I have even tried
"build": "babel src -d dist --ignore *.css,*.ejs,*.png,*.jpg"
Is there a way to do this in a better way instead of copying the non-js files. Thanks in advance any help will be highly appreciated.
If you have non-JavaScript files in the source directory that should be automatically copied to the output location when the command is run, simply add the --copy-files flag.
babel src -d dist --copy-files
The flag doesn't take any arguments and will copy all non-JS files over.
I'm developing an Express app. The code uses ES6 import statements, so it needs to be transpiled by Babel in ES5 code so it can be run with Node. The ES6 source code is stored in my src directory, and the compiled code is placed in my dest directory.
I would like an npm command that I can run that will watch for any changes in my src directory, transpile the project into dest, and then restart the Express app.
Below is my solution so far (I run npm run server:watch). It uses chokidar-cli to execute the server:build and server:run scripts whenever any js file changes within my src directory. This works perfectly except that the Express app does not die when the code is transpiled again, so I get a 'port in use' exception when I try to run server:watch again.
// package.json
"scripts": {
"server:clean": "rm -f dist/*",
"server:build": "npm run server:clean && ./node_modules/.bin/babel ./src --experimental --source-maps-inline -d ./dist",
"server:run": "nodemon dist/app.js --watch",
"server:watch": "chokidar 'src/*.js' -c 'npm run server:build && npm run server:run'"
}
Am I on the right track here? What is the best solution to this sort of problem?
(For clarification, I am talking about transpiling server-side code, so webpack or any other module bundler would be inappropriate here)
nodemon is watching your dist files, and is never terminating. With your watch script, you're launching a second instance of nodemon every time there's a file change, hence the "port in use" error.
You need to launch nodemon once, and keep in running in the background while your watch script is running. This is most easily done with https://github.com/mysticatea/npm-run-all.
Install it by running:
npm install npm-run-all --save-dev
on the command line.
Then you'd edit your scripts to:
// package.json
"scripts": {
"server:clean": "rm -f dist/*",
"server:build": "npm run server:clean && ./node_modules/.bin/babel ./src --experimental --source-maps-inline -d ./dist",
"server:run": "nodemon dist/app.js --watch",
"server:watch": "chokidar 'src/*.js' -c 'npm run server:build'",
"server:dev": "run-p server:run server:watch"
}
Then, you simply run npm run server:dev on the command line to start up your server via nodemon, and start the watch/rebuild process, all in one command.
Side note: If you're developing on Windows, you won't be able to use single quotes in your scripts, you have to use double-quotes, escaped with \" in the JSON.
I am trying to setup WebStorm with Flow typing for a Node.js project.
I have it all working fine with NPM scripts but would like to integrate with the IDE.
Here is the scripts portion of my package.json:
"scripts": {
"dev":
"watch --wait=1 'flow-remove-types src/ -d lib/ --all --pretty' ./src/ & nodemon ./lib/server.js",
"start": "npm run flow:build && node ./lib/",
"lint": "eslint src/**",
"test": "npm run flow:build && jest lib",
"coverage": "jest --collectCoverageFrom=src/**.js --coverage src",
"flow": "flow",
"flow:check": "flow check ./src/",
"flow:build": "flow-remove-types ./src/ -d ./lib/ --all --pretty",
"flow:deps": "flow-typed install",
"flow:watch": "flow-watch"
},
Now if I modify the run configuration for a test and:
change the src directory to lib
specify a before launch, run NPM script 'flow:build'
then I can run that configuration.
I still have two problems.
Debugging will not stop on a breakpoint
If I hit the arrow in the source code gutter to run the test, it creates a new config which runs against the flow source and fails
Does anyone have Node.js and flow working well together in WebStorm?
You can use --sourcemaps and -pretty flags:
flow-remove-types --pretty --sourcemaps --out-dir out/ in/
The -m or --sourcemaps flag adds sourcemaps files to your /out folder
The -p or --pretty flag removes the empty spaces in the files of your /out folder
flow-remove-types does not generate sourcemaps, so there is absolutely no way for debugger to map the generated file in lib to original files in src. You have to add breakpoints to the generated files located in lib folder if you like to debug your tests
no way - configuration is generated for the file you hit the arrow in. If you like to run individual tests from gutter, hit the arrow in generated file, not in the source one
You can use Babel flow preset instead of flow-remove-types:
npm install --save-dev babel-cli babel-preset-env babel-preset-flow
create a .babelrc file in your project root dir:
{
"presets": ["flow"]
}
And that's all you have to do - no precompiling, etc., running from gutter/debugging for source files will work out of the box
brothers and sisters, I am trying to do this:
"scripts": {
"start": "node ./node_modules/.bin/http-server ./public",
"poststart": "webpack --watch"
}
It is not working. The idea being node runs the app (duh) and there's a webpack --watch instance rebuilding my code as it changes. What's the answer here?
One way to do it is like this:
you start webpack --watch in one terminal to watch the sources and rebuild when changes occur
you use nodemon (which is a npm package) in another terminal to watch for build (NOT source) changes and restart the app
Reference: https://nodemon.io/