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.
Related
We're using Storybook platform to build UI components and pages in isolation. According to Storybook documentation, an npm package can be published with npm publish command after it's been built. But first they say that it needs to be built with this command:
{
"scripts": {
"build": "cross-env BABEL_ENV=production babel src -d dist"
}
}
This creates dist folder which looks like this:
My issue is that it doesn't include any .css or .json files that are part of the project. So I have to move them there manually.
Any idea how can I configure the project to include them automatically so I don't have to do it each time I run the build command?
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"
...
I have a react app. In my package.json:
"build": "react-scripts build",
After running this build script:
npm run build
Everything is built into the build folder and any files from the public folder get copied to the root of the build folder as they are (not minified into chunks). So any static files I want copied over and not changed I can put into the public folder.
I want to copy a file over as if it were in the public folder, but from a different folder such as /src/files/config.js
What's the best way to do that? Is it something like adding a webpack.config.js to the root of my app and having a custom configuration for sending over a file like this? Or maybe just a quick modification to the npm script in package.json somehow? Or am I missing something...
Thanks
Without ejecting or getting overly complex, set your scripts to something:
"build": "react-scripts build && cp /src/files/config.js build"
Might be worth pointing out to make sure that cp works in the environments you are supporting.
Windows:
"react-scripts build && copy src\\files\\config.js build"
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
I need to create a deploy package. That would after ng build --prod will create SOME_APP.zip file any name I will put in deploy.config.json or anywhere.
There is a way to do it without using webpack-plugins?
this kinda works but probably it's not how package.json was supposed to be used:
"scripts": {
"all": "ng test; ng build --prod; zip -r dist/app.zip dist/app;"
},
in other proj I see ppl relying on Jenkins and/or deploy tools to zip it.
Windows + 7-Zip Version:
Zip in dist-Folder without the folders dist/app-name
File is named according to your app-name and version, leading to a local history of version-builds if something's going wrong..
assuming that outputPath in angular.json is not changed..
"scripts": {
"build": "ng build --prod && cd dist && c:\\\"Program Files\"\\7-Zip\\7z.exe a %npm_package_name%_%npm_package_version%.zip ./%npm_package_name%/*",