I'm using Storybook to develop & test my components in isolation. I use typescript, babel, etc.
Everything works like a charm.
Now I want to compile my components as ES5 library (commonJS) and provide it to my other outer projects.
Basically storybook build command makes a whole storybook as a static website but I need the compiled components library.
The main problem here is that the storybook has some dependencies in node_modules that are ES6 modules, so babel configured to proceed them while Typescript handles my own components.
So I can't just use tsc etc. to compile my components eg components folder because typescript won't fetch and compile the dependencies from node_modules. They should be compiled to ES5, otherwise, any of my outer projects, that need to use compiled storybook components, won't be able to handle them.
Also, webpack has it's own aliases, so the whole tools zoo should be used during the deployment.
How to do it in the case of Storybook?
Should I install the webpack, etc. manually into the storybook and configure a deploy process separated of the storybook?
Can I just use the webpack of the storybook? (Because I've already configured it with Babel and Typescript).
Thanks for any help!
An alternative way here - is using babel-cli and only transpile your components as a set of files
Example of the command:
npx babel src -d lib/ --copy-files
The link to the Babel CLI: https://babeljs.io/docs/en/babel-cli
AFAIK, the configuration can include the typescript plugin
Related
I've just created my Storybook library of components (ES6 etc).
It is structured as a Lerna project (all components isolated in the packages/ folder). However, that's a private repo with no real publish feature so, I think Lerna won't work with a private (free) account.
I've pushed the storybook repo to my Bitbucket as it is.
Now, I'd like to use my storybook library of components from the main application which is a different repo (on Bitbucket) build on Next.js.
I was attempting to import the individual storybook components as follows
import MyComponent from 'storybook-repo/packages/my-component/my-component';
but it obviously doesn't work, returning this error:
Module parse failed: Unexpected token (8:9)
You may need an appropriate loader to handle this file type.
This, because MyComponent is a jsx file.
I was hoping Next.js to transpile the imported modules but this is not the case.
My questions are:
My guts say the import of the whole storybook as git+ssh://git#bitbucket.org/myusername/storybook-repo.git from package.json is not a good idea. Any better solutions?
Is it true that Lerna works only for public/Pro repos where I can publish my packages?
Why is Next.js not transpiling the imported jsx modules? At this point, how does this process work? Shall I transpile the storybook components from the remote repo or do the job from my main application?
Thanks
On my last project, we used Rollup.js to create a dist build of just the components we had developed in Storybook. Our components were located in src/components directory. We maintained an index.js for the components using an internal scaffolding tool. We published our dist folder as a privately scoped NPM package and then pulled in our components from there.
For local development, we used Webpack aliasing to check the current environment and either pull the published NPM package or pull directly from the storybook/dist folder that we were building to.
There's a great guide on building this here. Hope this points you in the right direction. As an alternative, I believe you can fiddle with next.config.js to override the Webpack config and make sure that your external imports get sucked up through the same Webpack, but, you also have to add a few rules to the .babelrc on the Storybook side to ensure that it gets ignored over there. We found it to be easier to just publish a package and bundle everything up.
I have a library written in ES6/JSX and want to install it using npm install on a create-react-app application. How can I force babel to parse this lib from node_modules?
Something like not ignore node_modules/my-library when transpiling.
I think your library shouldn't rely on third applications dependencies,
then it won't be useful and it will only work on projects that contain Babel as a depency.
Instead, You should add Babel to your library dependencies, and create a build of your library using babel to transpile your ES6 code to ES5 code which will result in standard javascript.
Therefore, you can easily add it to any project by importing the build.
I will be using Semantic-UI-React in my project but I came across following issues:
Docs link : https://react.semantic-ui.com/usage#css
Docs say webpack 1 is supported but not recommended. I am using Create React App which comes with webpack version 1.14.0. So does that mean I should not use Semantic-UI-React with CRA?
For styling, I also want some custom styles in my project , so I went with third option of Semantic UI package mentioned in the docs..
npm install semantic-ui --save-dev runs gulp internally and creates a semantic folder. But there is no dist folder as mentioned in the docs. From which path I should refer the semantic.min.css in my index.js file?
I am basically trying to use Semantic-UI-React with semantic.min.css with some of my own styles on top of it. But it seems I am making some mistake in the setup. Another option may be to go ahead with Semantic UI CSS package ? ...but according to docs I will not be able to use custom styles with this method.
I am a bit confused here , please help :)
The SUI-React docs comment about not recommending use of Webpack 1 is simply because it's not the latest version of Webpack. Webpack 1 still works fine in general. Also, the current version of Create-React-App (1.0) uses Webpack 2, and if you haven't "ejected" your CRA project, you can easily upgrade the react-scripts dependency to use the latest version.
If you want to build a custom Semantic-UI CSS file, yes, you would install the semantic-ui package, and that will create a semantic folder containing Semantic-UI's LESS source files and build system. From there, you would make any edits to SUI's source for your customization. Once you've made your edits, run gulp build inside that semantic folder, and it will create a semantic/dist folder containing the compiled CSS files (per the instructions at https://semantic-ui.com/introduction/build-tools.html ). Finally, you would copy the generated CSS files into your project, probably inside the src folder, and import those in your JS source.
If you don't care about generating a customized Semantic-UI CSS build, you can npm install --save semantic-ui-css, which has a pre-built version of the default Semantic-UI theme, and import the CSS from there.
For what it's worth, my own "Practical Redux" tutorial series uses Semantic-UI-React and the semantic-ui-css package, and I show how to add semantic-ui-css in Practical Redux, Part 4: UI Layout and Project Structure. (I've also used a custom Semantic-UI CSS build in my "real" project at work.)
I started to build a component library that I want to publish on NPM (and reuse in other apps) by creating a React app using create-react-app. Unfortunately the create-react-app default configuration doesn't seem to support building such component libraries (see these issues). So it seems I have to eject.
Do you have some instructions what to configure after ejecting to make this a component library I can reuse in other apps (I guess some Webpack stuff)?
Re-framing my comments into an answer.
Don't eject! CRA hides a lot of stuff under the hood and ejecting throws it up. It's relatively easier to just clone your src into another project with the tooling setup done.
And it's not very difficult to setup one yourself! Here's the things you will need to do:
Basic babel and webpack configuration so your code compiles.
Make sure React and React-DOM are added as external dependencies in your package.json file and added as alias in your webpack.config.js. (A thorough discussion is here.) This is important to ensure you ship the smallest bundles only. Also, React doesn't play well with multiple copies.
Optionally, do the same for any other heavier libraries, e.g. Material-UI, Bootstrap, Lodash etc.
In webpack's configuration, decide how you want your library exports should be? You should be good with UMD.
Add main (and optionally module) entries in your package.json to let npm imports know where the components should be imported from.
Publish it.
Done!
Or, you can simply clone one of these super thin component projects and put in your components there -
https://github.com/wangzuo/react-progress-label
https://github.com/aaronshaf/react-toggle
There are more complete starter-kits as well, but IMO it's important to first know the details yourself before you abstract them away. Once you are familiar with the process, you should try leveraging the kits too as they go much beyond the basics, like test integration, react-storybook support and great npm publishing support.
UPDATES:
The purpose of CRA is to allow quick experimentation and on-boarding to React development, without going through the (somewhat complicated to a beginner) tooling setup. The intended use case of CRA, as denoted by the "App" in the name, is the whole app, not a component. Although developing anything built on language features like ES6 takes some tooling, an app typically takes more setup than a component. E.g. you also need a server component which hosts the generated code. CRA does all this and more for you.
And if you are working on an app, you will eject when you want to take control of the server side of it. It adds value in that case as you will get the basic hosting code auto-generated by CRA during eject.
To address test needs, CRA also has Jest integration, which is a test runner having React specific features like snapshot testing. Again, setting it up manually with your build pipeline is a handful and CRA once again hides all of this complexity from you, so you can simply focus on writing the tests.
This is super simple - you don't actually need webpack if you want to publish a package. Don't install it just for that if you don't want to.
If you use ES6:
You can use a simple script to create a dist folder that babel will create the files after transpiling:
"scripts": {
// other scripts
// .. might want to change "rm -rf" below if you're on a PC
"build:production": "rm -rf es && cross-env NODE_ENV=production node_modules/.bin/babel ./src -d es"
},
What this does is:
Remove the es folder, which is a build folder.
Runs babel for your files (in case they are located in src folder, change it to wherever your files reside) and create the es folder with the transpiled files.
In order to use the script above you need to install the following dependencies:
babel-cli / babel-core / babel-preset-es2015 / cross-env
Make sure you have a .babelrc file so that babel will work:
{
"presets": [
["es2015", { "modules": false }]
]
}
Now all you have to do (after running npm run build:production) is to run:
npm publish
And your library is published in npm. This is also the command you run if you want to update, just don't forget to update the version number in your package.json.
In case you have files you dont want published to npm, just have a file in your root called .npmignore (similar to .gitignore) and list everything you want excluded.
If you don't use ES6:
In this case you don't need to transpile anything, just go straight to the npm publish section above and run it on the root folder you want published.
create-react-app is meant for quick setting up and development of apps, not really for development of libraries. For one thing, create-react-app creates an index.html file when building, which is usually not needed by libraries. Libraries require a different set of configuration (much less).
I faced this problem myself and have written a React component boilerplate for writing and publishing React components: https://github.com/yangshun/react-component-starter, after referencing how popular ES6 libraries were written, such as Redux.
Pros:
Similar to create-react-app, batteries are included
It has got all the important areas covered: development, linting, testing, and distributing
Minimal configuration
Babel for transpilation to ES5 and CommonJS format
ESLint included and configured
Jest tests examples
Webpack configuration that compiles to UMD
React Storybook for quick development of the components
Support for stylesheet distribution alongside your component
Cons:
Highly opinionated in terms of choice of tooling; they follow the choices set by create-react-app.
Have to manually update each package dependencies in future (you'll face this issue if you did eject anyways)
There is minimal configuration included and setup is easy. The various webpack, Babel and ESLint configurations should be quite understandable.
Hope this will be helpful to you. Feel free to give suggestions and comments on how it can be improved.
I have written some react components.
I have a folder of ES6 files with multiple files :
components/A.js
components/Button.js
I wan't to import them like this in my futur project.
import A from 'bootstrap-styled/components/A';
I would like to create a npm package.
I need to export them in ES5 format using the SAME directory structure.
I don't wan't a single output file.
Is there any existing program that can do that ?
You need to have Babel installed in you project (I assume that it is already installed because without it you would not be able to run your ES6 in the browser. So I omit all the settings of Babel, just make sure that you have babel-cli in your project).
So all you need is:
babel components --out-dir dist
It will compile all your files from components to dist.
Than you can publish it to NPM with
"main": "dist"
in your package.json
If you are looking for automatisation of this process try this boilerplate project -
react-cdk.
It'll do the exactly you asking: compile ES6 to ES5 every time you run npm publish