A
A
Alexander Menshchikov2018-11-26 16:30:17
Building projects
Alexander Menshchikov, 2018-11-26 16:30:17

How can I build an npm package that contains several css files and is used both directly and as an included package?

From the wording of the question, most likely, it is not entirely clear what it is about, so I will explain in a more human language.
I have a mini-project, within the framework of which a wrapper is made over a video player, providing a convenient interface for configuring the player outside. The wrapper is written in ES6 and uses a couple of helper functions imported from adjacent files. The package also contains 2 scss files, which are ultimately converted to css (the design for the player). As a result of the build, I should have a dist folder containing minified js and 2 css. 2 use cases:

  • direct connection of files (js, css) on the site page and inline-initialization of the player;
  • connecting a minified file as an external package within another assembly and using its interface.

And here I ask myself: what is the best way to collect all this?
Until it became necessary to include all this as a package, grunt was used to build and everyone was happy. But neither dancing with a tambourine, nor spells helped when trying to drag this package using webpack into the main project: the wrapper class is stubbornly invisible. (On the grunt side, babel+browserify is used; when connecting minified js directly on the page, everything is fine.)
I managed to assemble it using the same webpack, specifying the library parameter in the output. As a result, the assembly works well both when connected directly on the page and as a package. But one circumstance is very confusing: in order to generate css files, I had to write separate entries for them, and a js file is created for each css file (of course, formal, because there is no source js for it). They do not interfere with my life, but looking at them I understand that I am doing something wrong. You can, of course, build css with a separate command, or remove extra js after assembly. But perhaps there is a better solution.
Actually, I would like to ask advice from knowledgeable people - how would you solve this problem?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question