npm script, copy package.json to dist when bundling

Question

I am trying to add a second part to my npm bundle script. The first part runs great, however I am trying to copy in 3 files along with the bundle.

So right now I have :

"bundle": "NODE_ENV=production webpack --output-file bundledFile.js && cp package.json dist/",

The NODE_ENV=production webpack --output-file bundledFile.js works great by itself. The part that is not working is the && cp package.json dist/, I would like the script to copy my package.json (along with 2 other files actually, but just starting with this one) to the dist folder. Brand new to these scripts, any idea how to fix? Appreciate any advice, thanks!

Careful with using `cp` from the command line, as that won't typically be compatible for windows users (might not be a concern for you, though). Other than that, this looks right to me. You should be able to chain package.json scripts with `&&`. Are you getting any specific error? What happens if you make the two items two separate tasks, and then chain them instead? (`npm run build:bundle && npm run build:package-json` or something similar). — dvlsg, Aug 09 '16 at 19:18
@dvlsg thanks for the response, would you recommend something other than cp? also can I use the same syntax for multiple single files ( i want to add the readme and npmrc for example) — ajmajmajma, Aug 09 '16 at 19:20
If you're copying multiple files, and webpack doesn't support what you need (not sure about that), I would consider adding a build utility file. You don't need to go all the way to `gulp` or anything (although I do love `gulp`) -- you could just create a node file called `copy-files.js` and have it use the `fs` package to copy files. That would be (mostly) cross-platform since it's using node to handle copying files. Then you could call it with just `node copy-files.js` in your npm scripts. You'd still have to assume that `node` is available, but that's not too far of a stretch. — dvlsg, Aug 09 '16 at 19:26
@dvlsg that's perfect if you want to add that as an answer, that is exactly what I am looking for. — ajmajmajma, Aug 09 '16 at 19:28
I can add it as an answer, but maybe first check to see if splitting up the commands into two tasks `npm run build:bundle`, `npm run build:package-json`) and then setting `build: npm run build:bundle && npm run build:package-json` works for you. I still think we're going to have a problem with chaining commands, for whatever reason. — dvlsg, Aug 09 '16 at 19:28
@dvlsg I added `&& npm run copy` , and the copy script looks like, `"cp package.json dist/ && cp README.md dist/ && cp .npmrc dist/"` , this seems to work great. — ajmajmajma, Aug 09 '16 at 19:32

score 53 · Accepted Answer · edited May 23 '17 at 11:46

53

The syntax should work (and seems to, looking at your comments). I would suggest splitting your npm scripts across multiple points, though:

{
  "bundle": "NODE_ENV=production webpack --output-file bundledFile.js",
  "copy": "cp package.json dist/ && cp README.md dist/ && cp .npmrc dist/",
  "build": "npm run bundle && npm run copy"
}

In order to be cross-platform compatible (cp is not typically available on windows), I would also suggest adding a build file somewhere such as ./tools/copy-distrubution-files.js which would make use of fs to copy the necessary files, then call it in the npm scripts with node ./tools/copy-distribution-files.js. That will be (mostly) platform independent (you still have to assume that node is available as the nodejs executable, but that seems fairly reasonable to me).

edited May 23 '17 at 11:46

Community

1
1

answered Aug 09 '16 at 19:37

dvlsg

5,378
2
29
34

1

@mardok That depends whether or not you have the utility. I have Linux tools on my windows and `cp` works. – TheRealChx101 Oct 06 '18 at 19:23
9

Use [ncp](https://www.npmjs.com/package/ncp) instead of `cp` if you'd like to support cross-OS environments – Alex Klaus Jan 02 '19 at 06:17
1

CP works on Windows with Git Bash, just make sure you run your commands through there :) – Glen May 12 '19 at 10:50

score 7 · Answer 2 · answered Feb 13 '20 at 16:43

7

The quickest way for me was to reference powershell in a package.json script like this:

"copyFile": "@powershell copy './source/package.json' './deploy'",

answered Feb 13 '20 at 16:43

Dustin Spengler

5,478
4
28
36

4

You saved me from suiciding – AlwaysConfused Jan 13 '22 at 13:28

score 6 · Answer 3 · edited Jun 30 '21 at 05:05

6

If you're running on windows use the following command:

"copy": "copy \"package.json\" \"dist\" && copy \"README.md\" \"dist\" && copy \".npmrc\" \"dist\""

copy instead of cp. Don't forget to use "" for each path (escape them with \ within the quoted command). and if you need to define a long path, don't use / (slashes) but \ (backslashes)

like:

copy "devices\\VS-88UT\\index.html" "devices\\VS-88UT\\dist"

Also, if you prefere ther is a nice plugin to run bash command before and after each build

edited Jun 30 '21 at 05:05

Wang Tang

540
9
16

answered Jul 16 '18 at 22:47

IsraGab

4,819
3
27
46

2

This isn't valid JSON. Can you please clean up the quotes so I can easily paste this into my package.json – FirstVertex Aug 15 '19 at 14:24

score 1 · Answer 4 · answered May 31 '23 at 16:35

Use Node

Using Node.js built-in functionality, instead of depending on shell commands that aren't available on every OS, is the way to go. All other answers on this page should be avoided for that reason.

With current Node.js versions, one can use fs.copy to copy files and folders. Combining it with node -e "javascript code goes here", one can write short, cross-platform npm scripts.

"copyAssets": "node -e \"require('fs').cpSync('./assets', './build/assets', {recursive: true});\""

will copy the /assets folder to the /build/assets folder.

score 0 · Answer 5 · answered Oct 28 '19 at 00:43

0

To copy folders and files in windows just use

xcopy git\\* dist\\ /e /i /h

I think this might help someone.

answered Oct 28 '19 at 00:43

sisco

29
3

npm script, copy package.json to dist when bundling

5 Answers5

Use Node

Linked