I have the following package.json file and I am building using webpack:
{
"name": "web",
"private": true,
"scripts": {
"build": "webpack --config webpack.config.js --mode development"
},
"devDependencies": {
"webpack": "4.21.0",
"webpack-cli": "3.1.2"
},
"dependencies": {
"jquery": "3.4.1"
}
}
How can I pass a parameter when using npm run build to use verbose so I can see build errors?
Try the following:
npm run build --verbose
(you can pass any parameter via npm run <command> after --).
To be more clear with regards to the first answer, using npm run build --verbose does increase the log level of the npm process, as noted here https://docs.npmjs.com/cli/v8/using-npm/logging. This does not necessarily bump any log level in the Webpack process itself.
The first answer would incur additional logging for the npm process. The parenthetical note is slightly misleading -- if you want to pass a parameter to an npm script to pass to the underlying scripts, you need to add a primary "--". So, while that answer does increase npm logging, it doesn't necessarily alter the webpack logging verbosity.
For example, if you have a linter scripts in npm:
"jest-preview": "jest-preview",
"lint": "eslint ./src",
"build": "webpack --config webpack.config.js --mode development"
If you want to utilize the "--fix" parameter to pass to eslint, you would run this npm script as:
npm run lint -- --fix
As can be seen on https://webpack.js.org/api/cli/, there is no --verbose option for build in webpack-cli. There are some facilities for log output verbosity configuration for the loaders and plugins that can be implemented in the webpack config. I would check that documentation for further information.
Related
If I execute the following commands from the root of my Vue app (v. 2.6.12)
rm -rf node_modules
npm install
npm run serve
I get the following error
sh: vue-cli-service: command not found
If I manually add the following symlink to node_modules/.bin the error does not occur
vue-cli-service -> ../#vue/cli-service/bin/vue-cli-service.js
But I shouldn't have to do this manually, i.e. if this symlink is required, it should be created when the #vue/cli-service package is installed.
I'm using NPM version 7.0.3 and have the following declared in the devDependencies section of package.json
"#vue/cli-service": "^4.5.6"
You may be able to skirt the issue by using the following in your package.json:
"serve": "./node_modules/.bin/vue-cli-service serve"
OR
"serve": "node ./node_modules/#vue/cli-service/bin/vue-cli-service.js serve"
This is just a temporary fix, though, as it is most likely an issue with npm not setting the correct path or npm not installing the binary properly. Try upgrading npm and nvm. See #bravemaster's comment on the github issue, as this contains several potential fixes.
npm install worked for me in the past, but check the package.json, which should roughly like this:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
...
"devDependencies": {
...
"#vue/cli-service": "~4.5.0",
...
},
Vue cli must be installed with global flag.
npm install -g vue-cli-service
If error try same command with sudo.
Vue-cli should not be in your package.json as a dependency (not even in dev-dependencies) because it is used only to generate a new project from scratch, not being necessary to run/server/build a project. (in dev or production), as the scripts are set in scripts section from package.json.
Replacing NPM with Yarn 1.X resolved this issue
I'm trying to make the jump to pnpm from npm. I found a helpful hint to keep from running "npm install" after I make the change as described here: https://pnpm.js.org/en/only-allow-pnpm
Unfortunately my preinstall lifecycle override doesn't get executed. Seems to simple enough but npm install still works when I run something like "npm install #types/jest"
package.json:
{
"name": "react-sandbox",
"version": "0.1.0",
"private": true,
"scripts": {
"preinstall": "npx only-allow pnpm"
}
}
npm version 6.14.2.
Any ideas?
Unfortunately, the preinstall script is executed only during argumentless installation. So when you run npm add #types/jest, that script will not be executed, thus npm won't be prevented from running.
But it will fail when running npm install.
As of now, there is no other way to prevent npm from execution.
What is needed to run npm run build?
I have project vue
I want to install it to a new server
Do I only need to run npm install?
Usually npm run build will create a production build.
The build process does a lot of things for you:
transpiles JS code
bundles code and assets
uses cache busting techniques for assets
removes dead code
Using the production build is the way to go for production.
Later edit:
You should install npm to be able to run npm commands. You should also run npm install before running npm run build.
you need package.json that contains :
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
}
and also must contains dependencies like this
"dependencies": {
"style-loader": "^1.1.4",
"vue": "^2.6.11",
"vuex": "^3.3.0"
},
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
I have two versions of my application, for one I set --extended, and for the other not, like this
"scripts": {
"build": "webpack --mode production",
"extended": "webpack --mode production --extended",
// ...
}
Now, in my webpack, I access the extended like this
module.exports = (_env,argv)=> {
argv.extended
}
I am trying to improve this in a cross platform way to do something like
"scripts": {
"build": "webpack --mode production",
"extended": "--extended npm run build"
}
as to run the build script from extended but still access the --extended variable.
I there a way to achieve this? Thank you
I read this whole question How to set environment variables from within package.json but can't find a way
Change the scripts section of your package.json to the following:
"scripts": {
"build": "webpack --mode production",
"extended": "npm run build -- --extended"
}
Explanation:
As stated in the npm-run-script documentation which can be found here:
... The special option -- is used by getopt to delimit the end of the options. npm will pass all the arguments after the -- directly to your script:
So, essentially when you run the following command via your CLI:
$ npm run extended
npm invokes the extended script, which then runs the build script and passes the --extended argument to the end of it (i.e. it passes --extended to the end of the build script).
Is there another way?
Yes, you could also consider simplifying the scripts section of your package.json further by deleting your extended script completely.
For instance:
"scripts": {
"build": "webpack --mode production"
}
Then you can do either of the following:
Run the following command via your CLI:
$ npm run build
This will to invoke your build script without the --extended argument/option.
Or run the following command via your CLI instead:
$ npm run build -- --extended
This will invoke your build script with the --extended argument/option.