How to point my package.json at my fork of primeNg?

Question

I am using a pretty excellent widget library for Angular2 called PrimeNg.

Suppose that PrimeNg is missing some functionality that I require, so I fork the repo and submit a pull request to get my changes into the main repo. While I am waiting for the pull request to be accepted, I would like to include my fork of the repo in my package.json.

I tried updating my package.json from this:

"dependencies": {
    ...
    "primeng": "1.0.0-beta.13",
    ...
}

To this:

"dependencies": {
    ...
    "primeng": "JakeSummers/primeng.git#d35f5635a216005018bed89d249816e0f65f68f6",
    ...
}

Unfortunately this doesn't work.

Looking in my node_modules directory we see that it is essentially empty:

[Aug-30 18:04][node_modules]$ tree primeng/
primeng/
├── LICENSE.md
├── package.json
└── README.md

0 directories, 3 files

Before the change to my package.json, the directory contained the following:

primeng/
├── components
│   ├── accordion
│   │   ├── accordion.d.ts
│   │   ├── accordion.js
│   │   └── accordion.js.map
│   ├── autocomplete
│   │   ├── autocomplete.d.ts
│   │   ├── autocomplete.js
│   │   └── autocomplete.js.map
│   ├── breadcrumb
│   │   ├── breadcrumb.d.ts
│   │   ├── breadcrumb.js
│   │   └── breadcrumb.js.map
│   ├── button
│   │   ├── button.d.ts
│   │   ├── button.js
│   │   └── button.js.map
│   ├── calendar
│   │   ├── calendar.d.ts
...
├── LICENSE.md
├── package.json
├── primeng.d.ts
├── primeng.js
├── primeng.js.map
├── prod
│   ├── application.js
│   ├── polyfills.js
│   └── vendor.js
└── README.md

62 directories, 195 files

Looking further at the package.json docs, it looks like maybe I am not doing the

For build steps that are not platform-specific, such as compiling CoffeeScript or other languages to JavaScript, use the prepublish script to do this, and make the required package a devDependency.

For example:

{ "name": "ethopia-waza",
      "description": "a delightfully fruity coffee varietal",
      "version": "1.2.3",
      "devDependencies": {
        "coffee-script": "~1.6.3"
      },
      "scripts": {
        "prepublish": "coffee -o lib/ -c src/waza.coffee"
      },
      "main": "lib/waza.js"
}

The prepublish script will be run before publishing, so that users can consume the functionality without requiring them to compile it themselves. In dev mode (ie, locally running npm install), it'll run this script as well, so that you can test it easily.

The package.json for the primeNg project doesn't have a prepublish script, I am debating whether I need to add one and if so how? When will that script be run? Will it be run on pull from the git repo?

Any pointers or examples would be appreciated. Thanks!

Cross-posted this question to the PrimeNg git repo.

Answer 1

The issue is that you have source code in Typescript, but you need to have compiled JS inside the npm package. Unfortunately:

• .npmignore file excludes all the typescript sources;
• typescript compiler is in devDependencies, meaning it won't get pulled with npm install --production;
• no prepublish or postinstall scripts to compile automatically.

You probably can see what a solution might be from those points; couple of ideas:

1. compile and check in resulting .js files into git repository;
2. compile as part of npm publish with prepublish script;
3. compile as part of npm install:
   • remove .ts files from .npmignore;
   • pull everything from devDependencies into dependencies;
   • add postinstall script.

First option is easiest to implement, but also is prone to erros the most — it is easy to forget running compilation step before commiting, so you'll probably want to add that into git hook. But at that point, you are better of going with 2-nd or 3-rd.

If you decide to go for the 2-nd one and are set on using your own fork, make sure that prepublish script gets executed when installing a package.

---

On installing from Github^*

It looks like the npm install you mentioned is correct, though I would advocate for a more explicit format:

// The thing that actually gets saved into `package.json`:
github:${username}/${repository}#${optional-id}

// So the command would be:
npm install github:JakeSummers/primeng#d35f5635a216005018bed89d249816e0f65f68f6

_{^* npm also supports installing from places other than its own registry and github, see what a "package" is here, if you're curious.}