I am a newbie to npm and vue cli so my apologies beforehand. I created a vue package using npm and under scripts inside the package.json I see:
"scripts": {
"serve": "vue-cli-service serve"
}
When I try entering vue-cli-service serve in the command line I get:
'vue-cli-service' is not recognized as an internal or external command
but when i enter npm run serve, the command works fine. Why can't I get vue-cli-service to work directly from the command line?
Related
In my Vue JS application I have a file called .env.individual which defines a variable use for making API calls to the backend.
I also have .env and .env.production, etc, all with different values for the API URL variable.
When I run npm run serve -- --mode individual the application starts up and uses the URL found in the .env.individual file. Likewise, when I run npm run serve -- --mode production the application starts up and uses the variable found in the .env.production file.
Given the above I was assuming that when I run npm run build -- --mode individual the \dist would be generated and I could then run npm run serve and the application would use the variables found in the .env.individual file.
Given my package.json file contains this:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"deploy": "vue-cli-service s3-deploy",
"release": "npm run build && npm run deploy"
},
What is npm run serve actually doing and why - when I want to use a specific .env.XXX file do I need to specify it exactly?
npm run serve does not run your application from /dist folder. It compiles unoptimized build in memory (RAM). If you want run your optimized build from /dist folder, you can run it by some http server. For example https://www.npmjs.com/package/http-server .
I have a package.json with some scripts:
"scripts": {
"build": "webpack-cli --mode production",
"build:dev": "webpack-cli --mode development",
}
I just want to pass an additional parameter from the command line and not from the scripts in the package.json, so I run a basic command line like this:
npm run build:dev -- --test /toto/
I would like this command:
webpack-cli --mode development "--test" "/toto/"
But, it runs this command:
webpack-cli --mode development "--test" "C:/Program Files/Git/toto/"
Do you have any idea how could I avoid to have the absolute path in front the string "/toto" ?
Just compose the command with "'/toto/'"
npm run build:dev -- --test "'/toto/'"
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.
I am trying to automate the build process (Azure Devops) for my Vue.js application by making use of "npm" task.
To Install the node packages, I have used npm task with built in "install" command.
For build process, I have deployed another npm task but with custom command (build). This custom build command runs successfully with the following warning
"npm WARN build 'npm build' called with no arguments. Did you mean to
'npm run-script build'?"
I believe it is not doing the build at all as when I go the Copy Publish Artifact, it says
Total files copied: 0. [warning]Directory 'D:\a\3\a\drop' is empty.
Nothing will be added to build artifact 'drop'.
I have tried 'npm run-script build' command but get the error
"NPM failed with return code: 1"
There are some stack overflow threads (Here) where people mentioned the build as an internal command of install. If that's really the case, why I can't see the dist folder created by the install command or I am doing something wrong with my custom command npm task?
NPM Install Task
NPM Install Task with custom Build Command
npm install Task log
npm build Task log
Copy and Publish Artifact Task
Copy and Publish Task log
The script section in package.json file
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
For "npm build" task, the custom command (In question above, tried "build" and "npm run-script build") should be "run-script build". The build has successfully created the dist folder.