构建一个可安装在我所有项目中的自定义NPM软件包

Question

I've built a custom style "skin" on top of bootstrap that I intend to use in multiple UI projects.

Rather than copying/pasting the UI styles/components (built using sass and typescript in my current Angular 5 project), I want to build an NPM package that I can install these styles and components I've built in new projects, thus allowing updates to be done to the NPM package (maybe extending the controls within for example) without breaking the UI's using them or needing to update files within.

I've never setup an NPM project before. I've found a number of examples of how to build NPM packages, for example https://codeforgeek.com/2014/08/how-to-create-nodejs-npm-package/ but it seems to be for vanilla JS in this example. I need an example which:

1. Builds on a dependency, in this case bootstrap
2. Is to be used in Angular (I'm using version 5)
3. Is installable and updatable via NPM or maybe Yarn

Has anyone any top tips on achieving the above? Or any really clear guides where someone has done this before?

I realise this question is relatively broad but really I just need some pointers to get started and I will document the process further when I have a better understanding.

Thanks in advance!

Answer 1

So you should move your theme into a separate project. Then all you have to do is run npm init in that directory and you have a npm.

As for sharing it between projects, I would create a repo on Github for this theme npm. Push all of your changes there. Then you can reference it in the package.json of all your projects by linking to the Github repo. Here is a good Stack question about how to do that.

Finally, if you want to develop your theme locally inside one of your projects, you can use npm link . Here are he docs on that .