Инициировать проект
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
Создайте `.babelrc`
{ “presets”: [“es2015”, “react”, “stage-0”] }
Измените 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" }, …
Для обычного загрузчика css
Измените config / webpack.config.dev.js
… { test: /\.css$/, loader: `style!css?importLoaders=1&modules&localIdentName=[name]__[local]___[hash:base64:5]!postcss` }, …
Измените config / webpack.config.prod.js
… { test: /\.css$/, loader: ExtractTextPlugin.extract( ‘style’, ‘css?importLoaders=1&modules&localIdentName=[name]__[local]___[hash:base64:5]!postcss’, extractTextPluginOptions ) }, …
Создать следующую структуру папок
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/
В каждом `YourComponentN`
Создайте package.json
{ “private”: true, “name”: “YourComponent”, “main”: “./YourComponent.js” }
Создайте `YourComponent.css` (например)
.root { background: linear-gradient(to top,#fed835 20px,#ffeb3c 20px); font-size: 30px; color: white; line-height: 35px; text-align: center; }
Создайте `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
Создать src/node_modules/index.js
export { default as YourComponent } from './components/YourComponent'
Для демонстрационного приложения измените `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
Теперь вы можете запустить `yarn run start`, чтобы увидеть, что вы сделали
Добавьте необходимые пути к `.gitignore (например)
/node_modules /coverage /build .DS_Store .env npm-debug.log* yarn-debug.log* yarn-error.log* yarn.lock .idea
Скомпилировать библиотеку
yarn run lib
Создать репозиторий на github
Свяжите свой проект с github
git init git remote add origin https://github.com/lokhmakov/create-react-app-npm.git
Добавить и зафиксировать
git add . git commit -m "init" git push -u origin master npm publish
Вы сделали. Теперь вы можете использовать его
yarn add create-react-app-npm
И
import { YourComponent } from 'create-react-app-npm'