.eslintrc
{root: true,parser: 'babel-eslint',plugins: [/*'import', */'jsx-a11y', 'react'],
env: {browser: true,commonjs: true,es6: true,jest: true,node: true},
parserOptions: {ecmaVersion: 6,sourceType: 'module',ecmaFeatures: {jsx: true,generators: true,experimentalObjectRestSpread: true}},
settings: {'import/ignore': ['node_modules','\\.(json|css|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm)$',],'import/extensions': ['.js'],'import/resolver': {node: {extensions: ['.js', '.json']}}},
rules: {// [http://eslint.org/docs/rules/](http://eslint.org/docs/rules/)'array-callback-return': 'warn','camelcase': 'warn','curly': 'warn','default-case': ['warn', { commentPattern: '^no default$' }],'dot-location': ['warn', 'property'],'eol-last': 'warn','eqeqeq': ['warn', 'always'],'indent': ['warn', 2, { "SwitchCase": 1 }],'guard-for-in': 'warn','keyword-spacing': 'warn','new-parens': 'warn','no-array-constructor': 'warn','no-caller': 'warn','no-cond-assign': ['warn', 'always'],'no-const-assign': 'warn','no-control-regex': 'warn','no-delete-var': 'warn','no-dupe-args': 'warn','no-dupe-class-members': 'warn','no-dupe-keys': 'warn','no-duplicate-case': 'warn','no-empty-character-class': 'warn','no-empty-pattern': 'warn','no-eval': 'warn','no-ex-assign': 'warn','no-extend-native': 'warn','no-extra-bind': 'warn','no-extra-label': 'warn','no-fallthrough': 'warn','no-func-assign': 'warn','no-global-assign': 'warn','no-implied-eval': 'warn','no-invalid-regexp': 'warn','no-iterator': 'warn','no-label-var': 'warn','no-labels': ['warn', { allowLoop: false, allowSwitch: false }],'no-lone-blocks': 'warn','no-loop-func': 'warn','no-mixed-operators': ['warn', {groups: [['&', '|', '^', '~', '<<', '>>', '>>>'],['==', '!=', '===', '!==', '>', '>=', '<', '<='],['&&', '||'],['in', 'instanceof']],allowSamePrecedence: false}],'no-multi-str': 'warn','no-new-func': 'warn','no-new-object': 'warn','no-new-symbol': 'warn','no-new-wrappers': 'warn','no-obj-calls': 'warn','no-octal': 'warn','no-octal-escape': 'warn','no-redeclare': 'warn','no-regex-spaces': 'warn','no-restricted-syntax': ['warn','LabeledStatement','WithStatement',],'no-script-url': 'warn','no-self-assign': 'warn','no-self-compare': 'warn','no-sequences': 'warn','no-shadow-restricted-names': 'warn','no-sparse-arrays': 'warn','no-template-curly-in-string': 'warn','no-this-before-super': 'warn','no-throw-literal': 'warn','no-undef': 'warn','no-unexpected-multiline': 'warn','no-unreachable': 'warn','no-unsafe-negation': 'warn','no-unused-expressions': 'warn','no-unused-labels': 'warn','no-unused-vars': ['warn', { vars: 'local', args: 'none' }],'no-use-before-define': ['warn', 'nofunc'],'no-useless-computed-key': 'warn','no-useless-concat': 'warn','no-useless-constructor': 'warn','no-useless-escape': 'warn','no-useless-rename': ['warn', {ignoreDestructuring: false,ignoreImport: false,ignoreExport: false,}],'no-with': 'warn','no-whitespace-before-property': 'warn','object-curly-spacing': ['warn', 'always'],'operator-assignment': ['warn', 'always'],radix: 'warn','require-yield': 'warn','rest-spread-spacing': ['warn', 'never'],'semi': 'warn',strict: ['warn', 'never'],'unicode-bom': ['warn', 'never'],'use-isnan': 'warn','valid-typeof': 'warn',
'react/jsx-boolean-value': 'warn','react/jsx-closing-bracket-location': 'warn','react/jsx-curly-spacing': 'warn','react/jsx-equals-spacing': ['warn', 'never'],'react/jsx-first-prop-new-line': ['warn', 'multiline'],'react/jsx-handler-names': 'warn','react/jsx-indent': ['warn', 2],'react/jsx-indent-props': ['warn', 2],'react/jsx-key': 'warn','react/jsx-max-props-per-line': 'warn','react/jsx-no-bind': ['warn', {'allowArrowFunctions': true}],'react/jsx-no-comment-textnodes': 'warn','react/jsx-no-duplicate-props': ['warn', { ignoreCase: true }],'react/jsx-no-undef': 'warn','react/jsx-pascal-case': ['warn', {allowAllCaps: true,ignore: [],}],'react/jsx-sort-props': 'warn','react/jsx-tag-spacing': 'warn','react/jsx-uses-react': 'warn','react/jsx-uses-vars': 'warn','react/jsx-wrap-multilines': 'warn','react/no-deprecated': 'warn','react/no-did-mount-set-state': 'warn','react/no-did-update-set-state': 'warn','react/no-direct-mutation-state': 'warn','react/no-is-mounted': 'warn','react/no-unused-prop-types': 'warn','react/prefer-es6-class': 'warn','react/prefer-stateless-function': 'warn','react/prop-types': 'warn','react/react-in-jsx-scope': 'warn','react/require-render-return': 'warn','react/self-closing-comp': 'warn','react/sort-comp': 'warn','react/sort-prop-types': 'warn','react/style-prop-object': 'warn','react/void-dom-elements-no-children': 'warn',
// [https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules](https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules)'jsx-a11y/aria-role': 'warn','jsx-a11y/img-has-alt': 'warn','jsx-a11y/img-redundant-alt': 'warn','jsx-a11y/no-access-key': 'warn'}}
.gitignore
.DS_Store
build
node_modules
*.log
.npmignore
.babelrc
lib
CODE_OF_CONDUCT.md
README.md 这个可以自己yy CODE_OF_CONDUCT.md
script 启动
"scripts": {
"build": "babel lib -d build",
"lint": "eslint lib/**; exit 0",
"lint:watch": "esw -w lib/**",
"prepublish": "npm run build"
},
写一个button组件
$ touch lib/elements/Button.js
下面代码请注意，是用es6 字符拼接引号
import styled from 'styled-components';
const Button = styled.button`
background: #1FB6FF;
border: none;
border-radius: 2px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-size: 16px;
line-height: 40px;
font-weight: 200;
margin: 8px 0;
outline: none;
padding: 0 12px;
text-transform: uppercase;
transition: all 300ms ease;
&:hover {
background: #009EEB;
}
`;
导出组件
touch lib/index.js
import Button from './elements/Button’;
module.exports = {
Button,
};
项目提交, 一定先提交，后面的操作如果有误，至少还有代码可以重来
$ git status
$ git add -A
$ git commit -m 'Initial commit | adds basic setup
接下来就是比较重要的东西了
代码打包, 跟据自己的script来
npm run prepublish
在自己组件项目下发布组件库.
npm link
屏幕快照 2017-08-04 18.13.32 (2)副本.png
目录rul
屏幕快照 2017-08-04 18.22.16 (2)副本.png
最后在自己新建的项目中引用
npm link react-component-lib
屏幕快照 2017-08-04 18.24.11 (2)副本.png
好现在本地组件库就搭建完成了。
原文地址： https://hackernoon.com/building-a-react-component-library-part-1-d8a1e248fe6c
demo地址： https://gitlab.com/big5/react-component-library
谢谢大家，记得点赞
