I have the following scripts setup in my package.json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"dev": "vue-cli-service build --mode development",
"lint": "vue-cli-service lint",
"watch": "npm-watch"
},
"watch": {
"build": {
"patterns": [
"src"
],
"extensions": "js,jsx,vue,css"
}
},
Now I want to run npm-watch in development mode, but I don't know how to do it. I didn't find anything here: https://github.com/M-Zuber/npm-watch
Well, it was as simple as adding dev after npm-watch:
"watch": "npm-watch dev"
Related
I am facing this issue while building dist file in azure devops pipeline:
enter image description here
peice of code in package.json file is:
"name": "aimportal",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod --aot --vendor-chunk --common-chunk --delete-output-path --buildOptimizer --output-hashing none --watch",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
angular version : 9.0.1
I tride by deleting package.json file and added the same node js version but still facing the issue.
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"wbuild": "vue-cli-service build --watch",
"lint": "vue-cli-service lint",
"build:target": "vue-cli-service build --target wc --name my-compo './src/components/*.vue'"
},
I have two questions:
First: When I follow the documentation of "documents Build Target Vue.js" and I use npm run build:target, it does not work like mentioned in the documentation, but when I try to remove the single quotes ' ' then it does work, can someone explain this behaviour?
Second: Can I replace --name my-compo with name in the .vue file?
I want to have for example:
alert.vue -> my-compo.js -> alert.js
Maybe it helps you to install https://www.npmjs.com/package/cross-env and prefix your script commands with cross-env like:
"scripts": {
"serve": "cross-env vue-cli-service serve",
"build": "cross-env vue-cli-service build",
"wbuild": "cross-env vue-cli-service build --watch",
"lint": "cross-env vue-cli-service lint",
"build:target": "cross-env vue-cli-service build --target wc --name my-compo './src/components/*.vue'"
},
The reason can be that your are also in windows, like me.
I am using vue cli 3 and here is my vue.config.js:
const path = require('path')
const webpack = require('webpack')
const publicDir = 'public'
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
publicPath: isProduction ? './dist/' : '',
outputDir: 'public/dist',
indexPath: '../../resources/views/index.blade.php',
filenameHashing: true,
chainWebpack: config => {
config
.entry('app')
.clear()
.add('./resources/vue/main.js')
.end()
config.module
.rule('graphql')
.test(/\.gql$/)
.use('graphql-tag/loader')
.loader('graphql-tag/loader')
.end()
},
configureWebpack: {
plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]
}
}
I need to delete some files after build for production and I don't know how to detect the build process is over.
I didn't find any documentation on this.
You can do that in your package.json file. You can add your custom script or the modify existing one.
For example take a look at the clean script. You can call this script manually, or add it in another script. In this example it is executed when build script is executed:
"scripts": {
"serve": "vue-cli-service serve",
"watch": "vue-cli-service build --mode development --watch",
"dev": "vue-cli-service --mode development build",
"build": "vue-cli-service build && npm run clean",
"lint": "vue-cli-service lint",
"clean": "rm -rf ../public/dist"
},
...
NOTE: && makes them run sequentially clean will run after build.
How about adding a postbuild script:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"postbuild": "rm dist/<file-to-delete>", // <--- add this one
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
}
I am trying to create a Vue App with WebStorm in Mac. When I run the npm run dev get this error:
npm ERR! missing script: dev
This is my package.json:
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.5.16"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.0-beta.15",
"#vue/cli-plugin-eslint": "^3.0.0-beta.15",
"#vue/cli-service": "^3.0.0-beta.15",
"vue-template-compiler": "^2.5.16"
},
That's because there's no dev script in your package.json. You should do npm run serve. The available scripts are the following
package.json
// ...
"scripts": {
"serve": "vue-cli-service serve", // npm run serve
"build": "vue-cli-service build", // npm run build
"lint": "vue-cli-service lint" // npm run lint
},
// ...
I'm wanting to run ng build --prod with WebStorm, however it only seems to do ng build and misses the --prod command.
I'm wanting to run this in WebStorm, not in the terminal.
Note: if I add --prod to Arguments, it doesn't work:
/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run build --scripts-prepend-node-path=auto --prod
> cosmoline#0.0.0 build /Users/robertking/go/src/gitlab.com/cosmoline_client
> ng build
You could add --prod to the build script inside of the package.json. For example:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
Or add an alternate step:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build:prod": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
If you don't want to do it in the package.json file, since WebStorm isn't running ng directly (it's running via npm), it may not be passing the attributes.
Adding an additional -- may work (e.g. -- --prod).
Or try putting it in quotes (e.g. "--prod").