I'm new in vue, and a documentation says that every time I create a component I have to run npm run dev and npm run watch.
But don't know what their purpose is?
Can someone help me?
npm run dev combines all your Vue components and other JavaScript files into a browser-friendly combined file.
npm run watch does the same, but then it stays active and "watches" for updates to your .vue and .js files. If it detects a change, it'll re-build the browser-friendly file so you can just refresh the page.
Technically those will just run whatever scripts are defined in your package.json with the name dev and watch. Without seeing your package.json it's impossible to know exactly what they do.
For most project configurations those commands will compile your Vue components into raw javascript. The difference between dev and watch is the dev command will compile the code then exit while the watch command will compile the components then watch the files and recompile when one of them changes.
Related
I am using Vue 2 (doesn't really matter which version exactly).
I want to test some things that happen behind the hood in Vue. So I decided to add console.log('test123') in Vue's files in node_modules. It turns out that the console log never fires. I put that in all files of Vue in node_modules, even in all files of dist's folder of Vue.
How can I achieve this ? If I fork the repo, then I'd have to upload new versions each time on my repo and then run npm install. I know that will work but wanted to achieve this without forking.
Any ideas what I am missing ?
there are many ways .. but i feel more comfortable using this method :
you can download any npm package in a seperated folder next to your project...
open the folder of the package then run this in the terminal:
npm link
then open the project folder and run
npm link ../package-path # link the dir of your dependency
References
npm-link
How to test an npm package locally
I have a project with an existing webpack setup and it's unrelated to Vue.
Until now I have multiple entry points setups and some of these entry points are opening some iframes popups, and the plan is to build these iframes with VUE.
This means that I will also have multiple VUE entry points, this shouldn't be a problem but what I can't figure out is:
what is the best way to add VUE-cli into this already existing setup and use the same node_modules folder
Also to be able to add the vue-cli build commands to be run/triggered after my existing webpack build commands.
Let me know if more details are needed?
I've figure it out and it turn out that you can have both in the same project.
I've used vue create on my existing project folder and there is a prompt with a merge options.
Unfortunately it deleted my dependencies but was not such a big deal. Just had to reinstall them.
Now my project's webpack configuration remained completely separate form vue-cli which is handled by the vue.config.js and this is exactly what I wanted.
I am using something like this to build everything at once:
"build": "webpack --config webpack.prod.js && vue-cli-service build"
i want to integrate prettier in my vue application, so that it work, weht files instantly changes.
It works, when i use my "yarn run lint --fix", but i don´t want to activate it manuelly.
I want that it takes action in my "yarn serve" task. Can someone please show me his/her vue.config.js file?
I am using the standard vue-cli.
Thanks a lot!
Is there an easy way to provide usage information for npm scripts?
Ideally, when I run npm run, I would get output like this (note the description at bottom of each task):
Lifecycle scripts included in product-discovery-service:
start
node server.js
available via `npm run-script`:
watch
run-p watch:build watch:run
Run in development mode and rebuild/restart when changes are made
watch:build
npm run build:dev -- --watch
Probably don't need this (would be nice to be able to omit tasks like this)
watch:run
nodemon --watch build/ --inspect
Probably don't need this (would be nice to be able to omit tasks like this)
prewatch:run
wait-on --log build/server.js
Probably don't need this (would be nice to be able to omit tasks like this)
build
babel server.js --out-dir build/
Build the project
prebuild
rimraf build/
Probably don't need this (would be nice to be able to omit tasks like this)
build:dev
npm run build -- --source-maps
Probably don't need this (would be nice to be able to omit tasks like this)
It looks like npm doesn't support this, but maybe there's a third-party with a solution? I found npm-scripts-help, but it feels clunky.
Short Answer:
Yes you're correct, npm does not provide a built-in feature to include descriptions when running npm run. So, any solution you choose will have some level of "feels clunky" associated with it.
As you've mentioned
npm-scripts-help is a package which can achieve this. I'm not aware of other similar third-party solutions.
Alternative custom solution:
The following steps describe how to write a simple custom Nodejs utility script (without using another third-party package dependency). This script can then be invoked via npm-scripts.
Create a simple Nodejs utility script as follows. Lets name the file usage.js.
usage.js
const usage = `
Lifecycle scripts included in ${process.env.npm_package_name}:
start
node server.js
available via \`npm run-script\`:
watch
run-p watch:build watch:run
Run in development mode and rebuild/restart when changes are made
watch:build
npm run build:dev -- --watch
Probably don't need this (would be nice to be able to omit tasks like this)
watch:run
nodemon --watch build/ --inspect
...`
console.log('%s', usage);
Save usage.js in your projects root directory at the same level where package.json is stored.
Add the following usage script to the scripts section of your package.json:
...
"scripts": {
"usage": "node usage",
...
},
...
Run npm run usage to print the usage info to the console. A script name (i.e. usage) has to be provided with npm run. Unfortunately your ideal of just running npm run will only log npm's simple log - which doesn't include descriptions.
Notes:
On line two in usage.js we reference the package name variable via the part which reads: ${process.env.npm_package_name}
If you change the location of where usage.json is stored in your project directory you'll need to redifine the path to it in your npm-script as required. For example, if you choose to store it in a folder named scripts, which resides in your projects root directory, then your usage script should be defined as follows:
...
"scripts": {
"usage": "node scripts/usage",
...
},
...
Adding ANSI/VT100 Control sequences
You can utilize ANSI/VT100 Control sequences in usage.js to add colors and formatting to the usage log.
For example, in the following usage.js, the codes:
\x1b[1m
\x1b[0m
...are utilized to embolden code snippets and reset the formatting back to default respectively.
Tip: If cross-platform is a requirement I suggest using the ANSI 8/16 Colors (listed at the previous link) only. The formatting codes for bold (\x1b[1m) do not work in Windows cmd.exe using terminals such as Windows Command Prompt or PowerShell.
usage.js (with formatting)
const BOLD = '\x1b[1m';
const NORM = '\x1b[0m';
const formattedUsage = `
Lifecycle scripts included in ${BOLD}${process.env.npm_package_name}:${NORM}
${BOLD}start
node server.js${NORM}
available via ${BOLD}npm run-script${NORM}
${BOLD}watch
run-p watch:build watch:run${NORM}
Run in development mode and rebuild/restart when changes are made
${BOLD}watch:build
npm run build:dev -- --watch${NORM}
...`
console.log('%s', formattedUsage);
You could also consider combining ES6 Template Literals with process.env and package.json vars to reference the values of each npm-script. For example:
`${BOLD}${process.env.npm_package_scripts_watch}:${NORM}`
Through npm, is there anyway possible we can get webpack to reflect javascript changes on the fly, when lite-server is running? I have to do a npm run build every single time I have JavaScript changes.
Lite-server is doing an excellent job in updating my css changes on the fly whenever I save my .scss files. But in regards to webpack and the JavaScript files, its another story.
Thanks for any tips
Webpack has a watch mode.
You can either call webpack with --watch or put watch: true in your webpack config. This will keep it running and recompile if something changes.
Also consider to look into webpack-dev-server