It took me a while to get the debugger to work within Visual Studio Code. Now the program breaks on set breakpoints inside of .vue files/components. But none of the watches seem to work. They are either undefined or unavailable, even when the variables have been created.
The settings I use in launch.json :
{
"name": "chrome debug",
"type": "chrome",
"request": "launch",
"port": 3000,
"url": "http://localhost:3000/admin",
"webRoot": "${workspaceFolder}",
"breakOnLoad": true
// "sourceMapPathOverrides": {
// "webpack:///src/*": "${webRoot}/*"
// }
}
I build my app through npm run build or npm run devbuild which, by my knowlegde, 'compiles' the .vue components into Javascript files. And then start the app with either npm start or nodemon index.js.
Package.json
"scripts": {
<...>
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"devbuild": "cross-env NODE_ENV=development webpack --progress --hide-modules",
<...>
},
Have you ever tried add a new script with nodemon? Something like this:
"newScript": "nodemon -L -e ts,json --watch . --exec \"npm run build
|| npm run devbuild\""
-L = Though this should be a last resort as it will poll every file it can find.
-e = By default, nodemon looks for files with the .js, .mjs, .coffee, .litcoffee, and .json extensions. If you use the --exec option and monitor app.py nodemon will monitor files with the extension of .py. However, you can specify your own list with the -e (or --ext) switch like so: nodemon -e js,jade
--watch . = To watch all the changes on the path, in this case all the code on the current path.
(I got all of this information from the documentation.
then, run the command:
npm run newScript
Related
I want to minify/uglify a javascript file but after I run the script it never finishes executing. These are the scripts and dependencies I added to it.
"scripts": {
"minify": "uglifyjs -i src/*.js -o build/scripts.min.js",
"uglify": "npm run minify",
},
"devDependencies": {
"uglify-js": "^2.8.29"
}
This is the link to the package.json in my repo. What am I doing wrong? 🤔 Thanks
Hello I wish compile Vue files with Gulp, so far I've used gulp, webpack and webpack-stream which did the trick, my Vue compiling was set through webpack.config.js and webpack-stream was great for that.
But since I updated package.json and Vue to rely on vue-cli-service and vue.config.js I have to compile with 'npm run ...script andrun "vue-cli-service build".
I've managed to get it working like this:
In gulpfile.js
gulp.task('site-js', siteJS);
function siteJS() {
return gulp.src('src/js/**.js')
.pipe(plumber())
.pipe(webpack(webpackConfig))
.pipe(gulpif(globalVars.productionBuild, uglify()))
.pipe(gulp.dest(destDir));
}
In package.json
"scripts": {
"build-dev": "gulp build-dev",
"build": "gulp build",
"css": "gulp css",
"js": "gulp js",
"vuejs": "./node_modules/.bin/vue-cli-service build ./src/vue/app.js",
"dev": "gulp watch",
},
This works fine when I run 'gulp build' but it does not support 'gulp watch' as when .exac() is run from gulp watch state it crashes.
Is there a way to run vue build from code using vue-cli-service?
I want to run an npm script (like npm start) using forever. I know this command:
forever start -c "npm start" /path/to/app/dir/
But how can I ad that into a json file like this
[
{
// App1
"uid": "app1",
"append": true,
"watch": false,
"script": "-c npm start", // doesn't work
"sourceDir": "/path/to/app/dir"
}
]
You cannot add directly npm start to the script, as you already know that script attribute is only to specify the main entry point of your application, probably you need to use some args.
"scripts" : { "start" : "node server.js" } }
where server.js is :-
http.createServer(...).listen(process.env.npm_package_config_port)
I am using npm precommit hook, but it is not stopping a file with issues to be committed, nor am I getting the message "Pre commit checks" when I try to commit a file.
Package Json:
{
"name": "myfolder",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 0",
"precommit-msg": "echo 'Pre-commit checks...' && exit 0",
"lint": "csslint global/css"
},
"author": "SR",
"license": "ISC",
"dependencies": {
"csslint": "^1.0.4",
"jshint": "^2.9.4",
"pre-commit": "^1.2.2"
},
"pre-commit": [
"precommit-msg",
"lint"
],
"devDependencies": {
"pre-commit": "^1.2.2"
}
}
Please, make sure that your 'package.json' file is in the same folder, where '.git' folder is (where git repository was initialized). When you install 'pre-commit' package, 'pre-commit' file should appear under '.git/hooks/'.
Just FYI I had this issue because the pre-commit file was missing in the hooks folder.
Running npm i pre-commit --save-dev again created the file and solved it for me.
Have't managed to implement it with few "pre-commit" NPM modules (#fastify/pre-commit, monorepo-staged-precommit) so implemented it "manually" with adding tools/pre-commit.sh file into repo with content like:
#!/bin/sh
DIR='web'
echo "Pre-commit actions (NPM tests for $DIR)..."
cd $DIR && npm run test
and updating package.json with:
"scripts": {
"test",
"install-precommit": "cp ../tools/pre-commit.sh ../.git/hooks/pre-commit"
This solution has some limitations (like instead of automatic installation need to ask somewhere in "README" about npm run install-precommit and I'm not sure how it would work on Windows especially without Git Bash) but it worked for me.
Notes:
Other pre-commit NPM packages either didn't work as well or asked for NVM and other extra tools which I don't want devs to install for such small task.
pre-commit.sh may has any name and don't be executable - "install-precommit" task and git care about.
I'm using npm run to build a javascript file through browserify. Before building, I would like it to create a directory in my build folder, named after the version listed in the package.json. Here is a trimmed example of my package.json:
{
"name": "My App",
"version": "0.0.0-pre-alpha",
"description": "App desc",
"main": "index.js",
"dependencies": {
"browserify" : "*",
}
"scripts": {
"prebuild": "mkdir -p build/$npm_package_version",
"browserify" : "browserify ./src/index.js ./build/$npm_package_version/js/myapp-$npm_package_version.js",
"build" : "npm run prebuild && npm run browserify"
}
}
The code executed in prebuild is:
mkdir -p build/$npm_package_version
But I want it to execute
mkdir -p build/0.0.0-pre-alpha
What am I doing wrong?
Update:
Turns out you can't use arguments with mkdir in a script. So i ended up using the mkdirp npm module.
Old post:
For others looking for an answer: Turns out when you are working in windows the correct way to use the variables is
%npm_package_version%
So the final code should look like:
"prebuild": "mkdir -p build/%npm_package_version%"