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
Related
I want to build a vue.js app for production with npm ci.
Should I put #vue/cli-service in devDependencies of my package.json and execute
npm ci
vue-cli-service --mode production
Or should I put #vue/cli-service in dependencies of my package.json and execute
npm ci --production
vue-cli-service --mode production
As indicated here:
"dependencies" : Packages required by your application in production.
"devDependencies" : Packages that are only needed for local development and testing.
If you look at how the vue cli bootstraps an application you'll see a minimal package.json look like:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0"
}
Depending on how you want to deploy your app, there are different ways. The one I usually use for my Vue projects is to have a two-fold deployment process:
build the app with vue-cli-service
deploy the app to whereever I want it to run
It is pretty handy to define a "deploy" script in your package.json once you have the deployment figured out, e.g.:
"scripts": {
"start": "npm run serve",
"build": "vue-cli-service build",
"deploy": "npm run build && ./deploy.sh",
},
"dependencies": {…
where your deploy.sh runs all the neccessary means for deployment. The Official Vue Documentation has further pointers towards deployment on many widely used platforms.
EDIT: I guess the answer to your question would be "You run npm run build with the build script as defined above". Because that is the way you build a Vue app for production. Further information: Documentation about Environment variables with vue-cli-service
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 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.
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 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