Currently I am running a CLI command to transpile my node_modules:
babel --presets es2015 MYDIRECTORY --out-dir transpiled
That works fine, but with a problem. When I run it, it transpiles and copies files and folder structure. It only does it for *.js files. Other files (they dont need to get transpiled) are not copied.
So originaly I have this folder structure, before transpilation (plese see image):
It does not copy other files. For one module it is ok, I cna manually copy those files. But for more complex structure it is very complex.
How can I tell Babel to do transpilaiton as it does, but also to copy other non *.js files as well.
Thank you
Create a package.json if you don't have one yet.
npm init // follow on screen instructions
Add a scripts key to the package.json with an array as value.
Into the array add a command name as key and the commands to run as value.
Example package.json with the commands you need.
To execute run: 'npm run compile'
I've added an exclude flag to the xcopy command. If you put the js extension in the exclude file, those files are excluded from copying. Remove the exclude flag to copy everything.
{
"name": "someProject",
"version": "0.0.1",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"copysrc": "XCOPY C:\\path\\to\\project\\src\\*.* C:\\path\\to\\project\\dist /S /I /Y /EXCLUDE:C:\\path\\to\\project\\xcopyexclude.txt",
"babel": "babel --presets es2015 MYDIRECTORY --out-dir transpiled",
"compile": "npm run copysrc && npm run babel"
},
"author": "someAuthor",
"license": "ISC"
}
Links:
Stackoverflow - Xcopy exclude files / extensions
NPM scripts
Related
I have a Typescript project that's structured like this:
package.json
package.lock.json
server (Folder with multiple folders that contain TS files)
client (Folder with multiple folders that contain TS files)
The package.json in the root folder contains the following, since the proyect used to be written in JS.
{
...
"exports": "./server/index.js",
"scripts": {
"preinstall": "cd server && npm install",
"dev": "nodemon ./server/index.js",
"start": "node ./server/index.js"
},
"engines": {
"node": "^17.0.0"
},
"type": "module"
}
And I want to change the start script in order for it to work with the new typescript files. I tried with something like this:
"start": "npx tsc && node ./server/dist/index.js"
However, that only brings up the Typescript common commands menu whenever I run it with npm run start. So, how can I change it in order for it to work?
I am creating a simple component library and would like to have it built every time I save one of my files.
This is what my current command looks like:
"watch": "babel components/ --out-dir dist --copy-files --ignore test.js --watch"
I have also moved the --watch flag around to see if it would make a difference and so far it does not make a difference and it only runs once.
For what it's worth, I am using #babel/cli v7.8.4. Anyway how could I get it to build every time I make a change? If so, what is wrong with my command?
try follow:
"watch": "babel components --extensions .jsx --out-dir dist --copy-files --ignore test.js --watch"
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",
how do i to generate the build folder after my package be installed?
i did this:
"scripts": {
"build": "babel ./src --out-dir ./build"
}
But when other user install the package the npm not build.
How can i execute the build command after install?
You should use "postinstall" in scripts.
source: https://docs.npmjs.com/misc/scripts
It's almost certainly best not to have a post-install step at all. What you really want to do is to build the project before it is published, and then publish the built version to NPM (assuming that's what you are trying to do). In that case, you might use a prepublish script:
// package.json
"scripts": {
"build": "babel src -d build",
"prepublish": "npm run build"
}
And make sure the built files are included in your files array:
// package.json
"files": ["build"]
Or that your source files are excluded in your .npmignore:
// .npmignore
/src/
If you really do need a post-install step for some reason, use a postinstall script:
// package.json
"scripts": {
"build": "babel src -d build",
"postinstall": "npm run build"
}
But I can't think of a use-case where this would be a good idea.
I am trying to install histogramjs package. npm i histogramjs --->works well but when I try to run --> var hist = require('histogramjs')
I got the error on cmd:
'var' is not defined as internal or external command in npm
I have tried already tried
npm install var -- >get installed abd when I try to run ---> var env = require('var');
get the same error..
If run directly from node.js , get error 'cannot find module 'var'
Please help as I am very new to npm and node
Thanks
You should not type in var hist .... in your command line. What you type there, will be executed by shell, not by npm/node.
Instead, try:
Run npm init. Press enter couple of times, until it completes. This will create package.json file which is npm's configuration file. this file will tell npm, among others, which file is an entry point to your application.
Edit package.json, add "start": "node app.js", inside "scripts" element (see example below).
Create app.js in the same directory where package.json is located. Put your script in this file.
Run npm start.
If your script depends on 3rd party modules (in your case - "histogramjs" probably), install those as well:
npm install --save histogramjs
Running it without --save modifier will work as well. But --save will cause npm to put "histogramjs" as a dependency in package.json. Thanks to that, when someone gets your code later (i.e. from repository), he'll be able to simply run npm install, without even having to care which dependencies are required.
package.json
{
"name": "t",
"version": "0.0.0",
"description": "",
"main": "app.js",
"scripts": {
"start": "node app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "BSD"
}
app.js
var hist = require('histogramjs')
// ... rest of your code