Best way to create npm packages with create-react-app
2 min readApr 10, 2017
Init project
create-react-app create-react-app-npm
cd create-react-app-npm
yarn run eject
yarn add -D babel-preset-es2015 babel-preset-stage-0 babel-preset-react babel-cli
Create `.babelrc`
{
“presets”: [“es2015”, “react”, “stage-0”]
}
Change `package.json`
…
"name": "create-react-app-npm",
"version": "0.0.1",
"main": "lib/index.js",
"dependencies": {
…
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"lib": "babel src/node_modules --out-dir lib --copy-files",
"test": "node scripts/test.js --env=jsdom"
},
…
For normal css loader
Change `config/webpack.config.dev.js`
…
{
test: /\.css$/,
loader: `style!css?importLoaders=1&modules&localIdentName=[name]__[local]___[hash:base64:5]!postcss`
},
…
Change `config/webpack.config.prod.js`
…
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
‘style’,
‘css?importLoaders=1&modules&localIdentName=[name]__[local]___[hash:base64:5]!postcss’,
extractTextPluginOptions
)
},
…
Create next folder structure
src/node_modules/
src/node_modules/components/
src/node_modules/components/YourComponent/
src/node_modules/components/YourComponent1/
src/node_modules/components/YourComponent2/
…
src/node_modules/components/YourComponentN/
In each `YourComponentN`
Create `package.json`
{
“private”: true,
“name”: “YourComponent”,
“main”: “./YourComponent.js”
}
Create `YourComponent.css` (for example)
.root {
background: linear-gradient(to top,#fed835 20px,#ffeb3c 20px);
font-size: 30px;
color: white;
line-height: 35px;
text-align: center;
}
Create `YourComponent.js`
import React from 'react'import s from './YourComponent.css'class YourComponent extends React.Component {
render() {
return (
<div className={ s.root }>
{ this.props.children }
</div>
)
}
}export default YourComponent
Create src/node_modules/index.js
export { default as YourComponent } from './components/YourComponent'
For demo application change `src/App.js`
import React from 'react'import YourComponent from 'components/YourComponent'class App extends React.Component {
render() {
return (
<YourComponent>
1
</YourComponent>
)
}
}export default App
At now u can run `yarn run start` to see what you done
Add necessary paths to `.gitignore (for example)
/node_modules
/coverage
/build.DS_Store
.env
npm-debug.log*
yarn-debug.log*
yarn-error.log*
yarn.lock.idea
Compile library
yarn run lib
Create repository on github
Link your project with github
git init
git remote add origin https://github.com/lokhmakov/create-react-app-npm.git
Add and commit
git add .
git commit -m "init"
git push -u origin master
npm publish
You have done. Now you can use it
yarn add create-react-app-npm
And
import { YourComponent } from 'create-react-app-npm'