run npm script after package installing - npm

I have a simple git repository https://github.com/alexey-sh/test_webpack_with_npm
I want to use it as npm dependency but without publishing in npm.
So in other words I want to install the package in my another repository as dependency.
npm i --save git+https://github.com/alexey-sh/test_webpack_with_npm.git
But I want to use a modern js in my test_webpack_with_npm project and compile it into old javascript after package installation process. To achieve it I created npm scripts (test_webpack_with_npm package)
"scripts": {
"install": "npm run build",
"build": "webpack --mode production --config webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
so now there's a weird thing:
if I run npm run build from test_webpack_with_npm repository I can get dist/index.js without class declaration (as I expected).
but if I install the package via the following command
npm i --save git+https://github.com/alexey-sh/test_webpack_with_npm.git
I get another type of dist/index.js and there are class declaration.
How can I install the test_webpack_with_npm properly? I want to see old js in node_modules/test_webpack_with_npm/dist/index.js.
Steps to reproduce:
mkdir my_test_project
cd my_test_project
npm init
npm i --save git+https://github.com/alexey-sh/test_webpack_with_npm.git
check node_modules/test_webpack_with_npm/dist/index.js
Thanks!

the fix is very simple. just replace exclude with include in webpack config
include: path.join(__dirname, 'sources'),
that works perfectly.
updated config goes here https://github.com/alexey-sh/test_webpack_with_npm/blob/master/webpack.config.js

Related

What is the best way to build TS assets in a NPM package

I have a NPM package with TypeScript based React components. When the package is installed, I would like to run a script that essentially runs tsc to compile the TS files, then delete the src folder when done.
// Excerpt from package.json
"scripts": {
"build": "rm -rf ./dist && tsc",
"install": "tsc",
"postinstall": "rm -rf ./src tsconfig.json"
},
However, I noticed that the install hook always runs, whether you're running npm install git+ssh://git#github.com:sparkbuzz/react-components.git but also when you run npm install from within the package (during development for example)
Is there a way to ensure the install script is only executed when the NPM package is remotely installed?

What does " yarn build " command do? Are " npm build " and "yarn build" similar commands?

What does yarn build command do ?
Are yarn build and npm build the same? If not what's the difference?
yarn build and npm build are not existing commands by default. I think you mean yarn run build or npm run build.
build is a command which can be specified in your package.json file on the scripts property. See the example below.
{
"name": "mypackage",
"version": "0.1.0",
"scripts": {
"build": "webpack --config webpack.dev.js"
}
}
In this example, build is a shortcut for launching command webpack --config webpack.dev.js. You can use every keyword you want to define some shortcuts to launch commands.
And the only difference between the two commands it's the JS dependency manager you're using, yarn or npm.
More infos :
https://yarnpkg.com/lang/en/
https://www.npmjs.com/
"yarn build
Bundles the app into static files for production." from Create React App by MAD9135.
https://mad9135.github.io/F2020/modules/week3/02-react-tooling/07-create-react-app.html
yarn build is a shortcut of yarn run build
from original documentation:
Reference: https://classic.yarnpkg.com/lang/en/docs/cli/run/#toc-yarn-run-script
its the same i guess the real difference between yarn and npm is the performance and security that yarn provides.
yarn actually installing packages in parallelly and Npm only install one package at a time
And Yarn have more secure dependency.
Yarn is a package manager for your code. Yarn build makes a bundle of apps in one format and shows errors if the app has any problem that will make an error on the server.

Build npm-package from private git on install

I got a private bitbucket repo A that I install via npm in my project B.
npm install git+ssh://git#bitbucket.org....git
That works with no problems.
But now I would like to run a build in A after installing it.
npm in default comes with a lot of scripts for stuff like that https://docs.npmjs.com/misc/scripts
I tryed postinstall, prepare, prepublish, preinstall in my package.json in A:
...
"scripts": {
"prepublish": "npm run build",
"build": "...",
...
On installing my package A in B I get npm Error: npm ERR! premature close
I would like to run the build on install to remove build files from git (A).
In this case the build runs webpack + babel compile.
Project B is made with create-react-app.
I don't want to eject create-react-app, setup webpack or compile all node_modules packages.
Any experience with this workflow?
There is no need to eject Project B just adding your Project A as a dependency in package.json is enough. And for Project A please use "preinstall" it will run before every npm install including when you run npm install on Project B. And in my case I just tested it it working perfectly in my machine. If you encountering issue I think it might be because of the way you building it maybe? So can you show us the build script?
Use prepare since according to the NPM docs it will install dependencies and devDependencies before the package is packaged and installed.
Which is helpful if you are compiling using Typescript, or doing transforms.
...
"scripts": {
"prepare": "npm run build",
"build": "...",
...
Note: If your dist/build directory is ignored in .gitignore. Add an empty .npmignore file to your repository; otherwise the prepare script won't build the directory.
Ref: https://docs.npmjs.com/cli/install

npm install dependencies of local modules

I'm having trouble using npm with a local module. My project's structure looks like:
package.json
local_module/
- package.json
- gulpfile.json
gulpfile.js
The main project's package.json is essentially:
{
"dependencies": {
"local_module": "file:local_module"
},
"devDependencies": {
"gulp": "..."
}
}
The local module's package.json is essentially:
{
"scripts": {
"prepublish": "gulp release"
},
"devDependencies": {
"gulp": "..."
}
}
My intention is keep my project modular by keeping local_module as its own package that is used as a dependency for the main project. I want to run npm install in the main project and use local_module from node_modules. However, local_module needs gulp installed to run the prepublish step, and when running npm install from the main project, it does not install the dependencies for local_module, and so gulp isn't installed, so it can't do the prepublish step.
Several questions like this have been asked, like NPM doesn't install module dependencies, but many are old and there are so many versions of npm that I can't get a clear solution.
How can I get npm to install local_module's dependencies before the prepublish step? I tried adding a preinstall step for the main project, e.g.
"preinstall": "cd local_module && npm install"
But it seems npm tries to run the prepublish step of local_module before running the preinstall for the main project. I want a solution that will do this in one npm install step rather than having a separate step before this to do npm install in the local module.
I have found a solution that will work for me in the immediate future. I changed local_module's package.json to:
{
"scripts": {
"prepublish": "npm install --ignore-scripts && gulp release"
},
"devDependencies": {
"gulp": "..."
}
}
When npm install is run from the main project, the prepublish step is run first in local_module, so I force prepublish to also do an install so that gulp is available to do the actual prepublish step. This is hardly ideal however.

how to dynamically select package manager in package.json

I am currently using yarn as my package manager, but some people on my team may still use npm. I wrote a few scripts in package.json
"scripts": {
"clear": "rm -Rf app/javascripts/* & rm index.html",
"watch": "yarn clear | NODE_ENV=development webpack -w --env.dev",
"build": "yarn clear && yarn dev && yarn start",
"dev": "yarn clear | NODE_ENV=development webpack --env.dev",
"prod": "yarn clear | NODE_ENV=production webpack --progress --env.prod"
}
If I want to call clear inside of other scripts, I have to either use npm clear or yarn clear. As the script is currently written, someone who doesn't have yarn installed will run into an error.
Is there a way for me to write this package.json so that it will work regardless if someone runs npm build or yarn build, and it will use the package manager of their choosing?
You can use the variable npm_execpath, it will point to the package manager used to run the script.
For example, this will output the version of yarn or npm:
"scripts": {
"version": "$npm_execpath -v",
}
$ npm run version
> 3.10.10
$ yarn run version
> 0.21.3