How to correctly setup npm onchange scripts? - javascript

I'm trying to create a basic npm script to build my personal web projects, basically want to compile and minify Sass and JS ES6+ code. I'm new to npm scripts, but below is what I managed to do with the resources I found.
This is what I have so far:
"scripts": {
"devserver": "live-server --open=/dist/",
"sass": "node-sass --output-style compressed -o scss/ dist/css/ -w",
"terser": "terser src/js/index.js -c -m -o dist/js/index.js",
"watch:sass": "onchange 'scss/*.scss' -- npm run sass",
"watch:js": "onchange 'js/*.js' -- npm run terser",
"start": "npm-run-all --parallel devserver watch:*"
},
"devDependencies": {
"autoprefixer": "^9.8.6",
"node-sass": "^4.14.1",
"npm-run-all": "^4.1.5",
"postcss-cli": "^7.1.2",
"terser": "^5.3.0"
}
Couple of things I notice:
When I do npm run start the live server kicks in and loads the site and when I change the js or scss code the script register the changes but these are not reflected in the dist/ folder
Only when I run say npm run sass or npm run terser the changes do happen inside the dist/ folder
What am I missing or doing wrong?

Related

Node.js install Python dependencies from within package.json

I'm building a Node.JS project that uses both Python and NPM dependency modules.
The Node.JS modules are located within package.json and the python dependencies are inside a file requirements.txt.
I would like to install all the dependency modules (Python and Node.JS) from within package.json by running npm install.
Is this possible and how?
Thanks in advance!
The files look like below.
package.json:
{
"name": "app",
"version": "1.0.0",
"description": "Trial app",
"main": "bin/index.js",
"scripts": {
"dev": "npm install",
"start": "node app.js",
"test": "jest --forceExit "
},
"keywords": [
"AI",
"Blockchain",
"Decentralized"
],
"dependencies": {
"peerjs": "^1.3.2",
"redis": "^3.1.2",
"socket.io": "^4.1.2",
"socket.io-client": "^4.1.2",
"wrtc": "^0.4.7"
},
"devDependencies": {
"#babel/core": "^7.16.7",
"supertest": "^6.1.6"
}
}
requirements.txt:
Django==2.2.21
djangorestframework==3.7.7
django-rest-swagger
coreapi
You can define Commands to run within the "scripts" section of your package.json. Every script in there can be run with npm run [scriptname].
So you could do (&& runs another command after the first one)
"scripts": {
"install": "npm install && pip -r requirements.txt",
"dev": "npm install",
"start": "node app.js",
"test": "jest --forceExit "
}
And run npm run install
Replace "dev": "npm install" with "dev": "npm install & pip install"
Add "preinstall" entry to scripts.
npm, yarn and pnpm will automatically execute preinstall script before installing dependencies and 'devDependencies`:
package.json:
{
"scripts": {
"preinstall": "echo 'Installing Python Dependencies...' && pip install -r requirements.txt && pip install -r subproject/requirements.txt"
},
...
}
To install both npm and python dependencies, just run:
$> npm install
Installing Python Dependencies...
Also, there are other hook scripts in npm process, like "prepare", which might be useful. And scripts can be chained with ... && npm run <script>, so the "scripts" section can be organized into small atomic ones and built up by chaining them. I use "scripts" as a project's build and deploy active knowledgebase, replacing make file functionality not only in JS, but even in pure Python projects.
It is also possible to hook "package.json" into python script, i.e. create something like "build_project.py" script (or whatever name that works for you, I've used "make.py" and "build.py" for less typing) specific to the project, add all python-related stuff there, and run the npm commands from it. It may be more coding than using "scripts" section in "package.json".

Can't resolve this issue: Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3"

I'm developing a CLI with NodeJS. I use Nodemon for development. So when I do npm run start (= nodemon --exec babel-node bin/main.js), everything works fine. However, when I install my CLI (with npm i -g .) and run it (with opews (name of my CLI)), I get this error:
Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of #babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "#babel/core" or "babel-core" to see what is calling Babel. (While processing preset: "/Users/arthurfontaine/Documents/Lab/opews/parser/node_modules/#babel/preset-env/lib/index.js")
Here's part of my package.json:
"dependencies": {
"chalk": "^4.1.0",
"dom-parser": "^0.1.6",
"franc": "^5.0.0",
"jsdom": "^16.2.2",
"lda": "^0.2.0",
"minimist": "^1.2.5",
"node-fetch": "^2.6.0",
"node-vibrant": "^3.1.5"
},
"devDependencies": {
"#babel/cli": "^7.10.5",
"#babel/core": "^7.10.5",
"#babel/node": "^7.10.5",
"#babel/preset-env": "^7.10.4",
"nodemon": "^2.0.4"
},
"scripts": {
"start": "nodemon --exec babel-node bin/main.js"
}
and my .babelrc:
{
"presets": [
"#babel/preset-env"
]
}
and the header of my main.js:
#!/usr/bin/env babel-node
'use strict';
What I tried:
globally uninstall #babel/cli to see if it didn't load the globally installed one instead of the project one
uninstall / reinstall "Babel-related" modules in my project with npm i #babel/cli #babel/node #babel/core #babel/preset-env --save-dev
install babel-core#7.0.0-bridge.0 like it says here
install babel-core but it install the 6.23.3 version
Every time I try, it gives me the same error
What I checked:
if 6.23.3 appears in my package-lock.json but not
run npx npm-why #babel/helpers as it says at this issue. it returns me:
Who required #babel/helpers:
opews > #babel/core > #babel/helpers#7.10.4

lint-staged fails with "npm could not be found. Try `npm install npm`."

I have lint-staged installed in a multi-package repository.
The structure is:
|-- package.json
|-- package-one
|-- package.json
|-- javascript
|-- package-two
|-- package.json
|-- javascript
I have the same setup in a different repo on the same machine and the below works with no errors.
I am using lint-staged to run eslint on pre-commit. Each sub-package has a lint npm script in it.
In the other repository I call lint-staged on each package without error, however, in this repo when running against a stage file it:
correctly identifies the staged file
produces the error npm could not be found. Try npm install npm.
if I change the npm script out to simply be "git add" then the error is git could not be found. Try npm install git.
Running which npm produces the same results in the working and non-working repos.
Running npm install or any other npm command works when ran directly, just not when ran through lint-staged.
I am at a loss as to what may be causing this?
"devDependencies": {
"husky": "^2.4.1",
"lint-staged": "^8.2.1",
},
"lint-staged": {
"packages/package-name/**/*.{js,jsx}": [
"npm run --silent lint --prefix packages/package-one"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}

How to use babel with npm package that will be used by react

Trying to do what I thought was a simple thing.
I have a node package that uses advanced js syntax. I want to depend on it in a react project.
So I installed babel packages via --save-dev, and added a .babelrc:
{
"presets": ["env"],
"plugins": ["transform-object-rest-spread"]
}
That was not enough so I added an npm script under install to trigger the compilation. Then I had to include the compiled target lib/index.js as my entry point via main. So in the end my package.json looks something like this:
{
"name": "bla",
"version": "1.0.0",
"scripts": {
"postinstall": "babel src --out-dir lib"
},
"main": "lib/index.js",
"dependencies": {},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react-native": "^4.0.0"
}
}
When I run npm install locally on this project, it builds properly. However when react scripts build this (the dep is from github), I get an error: sh: 1: babel: not found.
Why is this so difficult? What am I doing wrong?
sh: 1: babel: not found is from your shell not finding the babel binary file (normally under ./node_modules/.bin/babel)
You'd want to compile before you publish to npm, so anyone who installs your package has the built files. But, for Github try something like:
"postinstall": "npx babel src --out-dir lib"
This hack worked instead of the postinstall:
...
"preinstall": "npm install --ignore-scripts && babel src --out-dir lib",
...
Source: https://github.com/Financial-Times/structured-google-docs-client/commit/891180db742ed00cace0139b201850f79d337098
Also relevant: https://github.com/npm/npm/issues/10366
I am not sure I understand the need here correctly, but could you not just run the babel call in prepare or prepublish scripts? That way only local npm install calls would pick that up.
See more about npm scripts lifecycle: https://docs.npmjs.com/misc/scripts

Webpack with html-webpack-plugin, error when installed globally

I know this problem has been reported elsewhere, when webpack and html-webpack-plugin are installed with npm -g:
module.js:341
throw err;
^
Error: Cannot find module 'html-webpack-plugin'
at Function.Module._resolveFilename (module.js:339:15)
And the answer people have found is to install one or both locally to the project. But that won't work for me. I need to get this working in our shared build system, not just in my dev environment. This means having it installed globally so that all projects have access to it via their ant/nant build scripts run by Jenkins.
My project is very simple. A couple of html pages with content generated by reactJS scripts included in the html with script tags. This should be easy, and its beginning to be a pain. Thinking of dumping webpack and looking for another simple javascript package manager.
Are there environment variables that we can use to tell webpack to look in the global node 'node_modules' directory for 'require'd plugings/packages?
Suggestions?
You don't have to install webpack globally for Jenkins.
Add to your package.json under scripts a command that runs the local webpack, like this:
"scripts": {
"start": "webpack-dev-server --inline --hot",
"build": "webpack -p"
},
Now Jenkins can run your build script, without having a global webpack installed:
npm run build
In this way you can maintain multiple projects with different versions of webpack, and each project can have it's own local dependencies.
The scripts prop is part of the projects package.json. The package.json contains all dependencies, and dev dependencies (build, testing, etc...) of the project. Using the package.json running NPM install on your build machine, you can install locally (part of the project dir) all dependencies. A sample of a package.json for an angular project built with webpack:
{
"name": "whatever",
"version": "1.2.0",
"description": "whatever",
"scripts": {
"start": "webpack-dev-server --inline --hot", // runs the dev server
"build": "webpack -p" // builds the release
},
"dependencies": { // the dependencies that are part of the actual release
"angular": "1.5.0",
"angular-animate": "1.5.0",
"angular-messages": "1.5.0",
"angular-ui-router": "0.2.15"
},
"devDependencies": { // build dependencies
"babel-core": "6.5.2",
"babel-eslint": "6.0.0-beta.1",
"babel-loader": "6.2.3",
"babel-preset-es2015": "6.5.0",
"babel-preset-stage-0": "6.5.0",
"css-loader": "0.23.1",
"file-loader": "0.8.5",
"html-loader": "0.4.3",
"html-webpack-plugin": "2.14.0",
"less-loader": "2.2.2",
"style-loader": "0.13.0",
"url-loader": "0.5.7",
"webpack": "1.12.14",
"webpack-dev-server": "1.14.1"
},
"license": "MIT"
}
Whenever the git master is updated, Jenkins pulls the latest commit, cleans the current build directory, including all dependencies, and runs in the project folder the following commands:
npm install to install all dependencies locally, as part of the project folder
npm run build to build the release
Jenkins is not aware of webpack or any other build tool or dependency. The only things that are installed globally on Jenkins are nodejs and npm.
And here is the simple bash script that runs the commands:
rm -rf node_modules || true // remove node_modules (all deps)
npm install // install all deps
npm run build // run the build script

Categories