Hi I use npm install jquery to install a jQuery for my project.but i find it is located in node_modules\jquery with many unwanted files.
but I just wana put node_modules\jquery\dist\jquery.min.js into static\jquery folder
what is the best and common way? copy and paste manually?
You can use npm to do this. In your package.json, add the following to the scripts key
...
"scripts": {
"build:jquery": "cp node_modules/jquery/dist/jquery.slim.min.js static/jquery/"
},
...
Then you can run: npm run build:jquery
You can add more build tasks to this section as you need them such as copying images and minifying scripts and css, then chain them together in a single command with npm-run-all:
$ npm install npm-run-all --save-dev
And...
...
"scripts": {
"build:jquery": "cp node_modules/jquery/dist/jquery.slim.min.js static/jquery/",
"build:images": "cp -R src/assets/images/ static/images/",
"build": "npm-run-all -p build:*"
},
...
Then run npm run build
npm is a great build tool and often bypasses the need for an additional build framework such as Gulp or Grunt. It can also handle file watchers and such to rebuild when things are modified automatically.
Related
I've always used just npm and never yarn/webpack explicitly. I need to run the code from this repo:
https://github.com/looker-open-source/custom_visualizations_v2
Like a dev server or something to ensure it's serving the files properly but I don't see a "run" like npm run start. Does this just not exist with yarn? It feels like this code should work as is and I shouldn't have to add anything.
EDIT: I've now tried yarn run watch but it just seems to build the code again and not actually host anywhere
npm run somecommand just looks up in the "scripts" field of package.json for the key
somecommand and executes the value in the terminal.
So npm run start basically runs the start script from package.json
The same thing is done using yarn via simply yarn start
In the linked repo, there isn't a start script in the package.json, rather a watch script, so you should be able to run it with the below steps:
yarn to install dependencies after cloning the repo to local (similar to npm install)
yarn watch to start the webpack server (analogous to npm run watch)
Edit:
Turns out the watch command is just setting up webpack to watch for changes and recompile the project every time there is a change.
To run a development server, you will need to add another script preferably with name start and use webpack-dev-server
So the package.json has entries like:
...
"watch": "webpack --config webpack.config.js --watch --progress",
"start": "webpack-dev-server --config webpack.config.js",
...
Then running yarn start should open a dev server at localhost:8080
Every time I try to run npm start or npm build I get an error saying unknown: Entry /mnt/c/Users/kabre/Desktop/18-forkify/index.html does not exist. I got told that Parcel might be automatically renaming my index.html. Not sure how to go on about fixing this since I'm just starting out learning Parcel/npm.
Try this:
Run npm init -y in your project
Install parcel in your project: npm install parcel-bundler --save-dev
Put this in your package.json:
"scripts": {
"start": "parcel ./index.html",
}
Run npm start after this.
And will running perfect.
Find more in https://parceljs.org/getting_started.html
I can use parcel index.html to create a local development server, bundling and hot module replacement. But it have come to my attention that using npm run dev does kind of the same think, so my question is:
what is the difference between the two? and how npm run dev is making the bundling process?
NPM vs Parcel isn't a valid comparison. They are two separate things. You can use Parcel with both NPM and Yarn.
Parcel is a web application bundler that is comparable to Webpack
NPM is a package management system for node.
npm run * is a command that will execute any npm script specified within your package.json and has no exclusivity to Parcel. You can of course make an npm script that will execute Parcel commands.
If you go into your package.json file, you will see a scripts property. Within this object, you can define arbitrary scripts to run. There are reserved script names such as start, install, build among others, but for the most part, this is a "free-for-all" that enabled the developer to specify any arbitrary scripts to run. A few common scripts that you'll typically see scripts to bundle your project or run a linter.
Example of package.json
Webpack Example:
{
"scripts": {
"build": "webpack --config <your entry file>"
}
}
Parcel Example:
{
"scripts": {
"build": "parcel build <your entry file>"
}
}
I have this problem that is not letting me debug my website.
You dont have a 'start' script defined in your "scripts" section.
You could use the defined 'dev' script (npm run dev) or rename it to 'start'.
"scripts": {
"start": "nodemon src/index.js"
}
Tipp: Use npm run to list all available npm sripts
I am trying to build my package.json file, and I am having a difficult time when it comes to writing scripts.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build-css":"node-sass --output-style compressed -o build/styles src/styles",
"pugtohtml": "npm pug -D index.pug"
},
this doesn't work
I've installed the pug package and now I want to automate the task using just npm can you please help me with that and I would appreciate it if you give me tips and resources of how to learn writing scripts and automating tasks using just npm, thank you!
You must write the task like this
"pugtohtml": "pug --output-style compressed -o dist/html/ assets/pug/*.pug"
It looks like the command line client is required to use this with NPM scripts.
Per the Pug NPM page:
Package
npm install pug
Command Line
After installing the latest version of Node.js, install with:
npm install pug-cli -g
I'm using npm install pug-cli --save-dev instead because I prefer packages to be installed local to the project I'm working on, but YMMV.
If you're into the global (-g) thing, you might not need the pug-cli package for command line handling, and you could possibly use the other solutions mentioned here.