Repository navigation
How to publish components without ejecting #796
Description
I hope others find this useful.
I have a project built using CRA that includes some components I wish to publish on npm. In order to do that I need to use babel to transpile the code to ES5.
Out of the box, babel is not available from a package.json script and I really don't want to eject. So I made this work by npm installing babel-cli and babel-preset-react-app and then adding a compile script that looks something like this:
set NODE_ENV=production&&babel -d lib/ src/ --presets react-app
This seems to work, plus all the CRA scripts (start, test and build) seem unaffected.
So if you need to do this, it looks like you can achieve it without having to eject. Which is a nice surprise.
Activity
gaearon commentedon Sep 30, 2016
Would you like to add
Using the Babel Presetto the User Guide?robcaldecott commentedon Oct 5, 2016
I think that would be really useful.
emilebres commentedon Oct 6, 2016
It would indeed be useful. I used your setup myself and it works great. But I have a problem with CSS.
I have a few stylesheets (one per component) that I import via Webpack (as described in the User guide). However, the stylesheets are not copied into lib when using Babel. So I had to extract the stylesheets in an index.css file and npm install
postcss-cli,cssnanoandautoprefixer. I then added a new compile step which gives us the following result:It works but it does require putting all your css in one file. I don't know how to do better.
sheerun commentedon Oct 7, 2016
@gaearon Could create-react-app generate .babelrc file with
{ "presets": ["react-app"] }(or to package.json)? It would make all babel scripts work out of the box..gaearon commentedon Oct 7, 2016
@sheerun
We want to hide dev dependencies and their versions, so I would like to avoid that. I understand the motivation in this issue but it's a slightly more advanced use case, and so we don't have a clean support for it.
I think that after we implement #741, we might take a look at supporting building/publishing components with that package structure.
dchambers commentedon Dec 9, 2016
@emilebres, is the idea that you're putting everything into one CSS file to simplify consumption, since only one CSS file has to be imported in addition to the code itself?
emilebres commentedon Dec 9, 2016
That's certainly one advantage yes.
Although these days I tend not to style the components directly (colour, font) but rather to expose classes that the user can use to customise the components as she wishes. And I use inline styles for the absolutely necessary CSS (position, sizes).
dchambers commentedon Dec 9, 2016
Thanks @emilebres, good to know.
The problem I'm facing is that the components I want to compile are using CSS modules, which creates its own additional set of problems. I'm more & more preferring the atomic functional CSS approach over both style-in-js and CSS Modules, since it solves this and many other styling & theming related issues.
mappmechanic commentedon Jan 4, 2017
I would love to contribute to this, as I will have to do a POC in implementing thing like this for my new project. http://github.com/mappmechanic/codelab-book
@gaearon - Please do guide me if I should do a Prototype with that Babel Preset thing or some other approach.
gaearon commentedon Jan 8, 2018
I'll close as this is currently out of scope of the project.
I recommend nwb for publishing components.
quantuminformation commentedon Dec 14, 2018
For a very simple start to uncompiled typescript components, this might make a good read.
Its done for vanilla Typescript components but principles should cross over to TSX
https://medium.com/@quantumjs/combining-webpack-and-typescript-to-publish-component-libraries-over-npm-d22c3201ab22
If anyone wants I can look at TSX.