Common tools I use across my React Component projects. Webpack, Gulp, Babel, Live reload, React hot reload, CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, SASS, PostCSS, ... 通用React组件开发工具
OTHER License
Common Gulp tasks I use across my React Component projects. Base on react-component-gulp-tasks
This package provides common gulp tasks for building react components with:
You control the settings for the tasks by providing a config
object, as described below.
The tasks assume you are following the following conventions for your project:
bower.json
package.json
gulpfile.js
src
MyComponent.js
sass // or less
my-component.scss
lib
// contains transpiled source
MyComponent.js
dist
// contains packaged component
my-component.js
my-component.min.js
my-component.css
my-component.min.css
example
dist
// contains built examples
src
app.js
app.scss
index.html
For a complete example see react-component-starter
npm install --save-dev gulp react-component-tools
In your gulpfile, call this package with your gulp
instance and config
. It will add the tasks to gulp for you. You can also add your own tasks if you want.
var gulp = require('gulp');
var initGulpTasks = require('react-component-tools');
var taskConfig = require('./config');
initGulpTasks(gulp, taskConfig);
You can customise the tasks to match your project structure by changing the config.
Required config keys are:
Component
component.entry
- the path of source (entry) file for the componentcomponent.name
- controls the standalone module namecomponent.dist
- the directory to build the distribution tocomponent.pkgName
- the name of the package that will be exported by the component (must match the name of your package on npm)component.dependencies{}
- webpack externals, array of common dependencies that will be excluded from the buildcomponent.less
- the entrypoint for the component stylesheet, if you're using less to provide onecomponent.sass
- the entrypoint for the component stylesheet, if you're using sass to provide oneExample
example.src
- the directory to load the source files fromexample.dist
- the directory to build the distribution toexample.entry{}
- scripts will be transpiled with babel and bundled by webpackexample.files[]
- files will be copied as-is into the example.dist
folderexample.port
- port to serve examples on, defaults to 8888
Alias
alias{}
- webpack aliasvar gulp = require('gulp');
var initGulpTasks = require('react-component-tools');
var taskConfig = {
component: {
name: 'MyComponent',
dependencies: {
classnames: 'classnames',
react: {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react'
}
},
sass: './scss/my-component.scss' // or `less: 'less/my-component.less'`
},
example: {
dist: './examples/dist',
entry: './examples/src/app.js',
html: './examples/src/index.html',
files: [
'./README.md'
]
}
};
initGulpTasks(gulp, taskConfig);
gulp dev
gulp dev:openBrowser
gulp clean:lib
gulp build:lib
gulp watch:lib
gulp clean:dist
gulp build:dist
gulp clean:examples
gulp build:examples
gulp watch:examples
gulp build
gulp bump
gulp bump:minor
gulp bump:major
gulp publish:tag
gulp publish:npm
gulp publish:cnpm
gulp publish:examples
publish to gh-pagesgulp release
I wrote this package because maintaining my build process across multiple packages became a repetitive chore with large margin for error.
Although its quite opinionated, hopefully it will be a useful resource for other package authors. It's got all the nice things I found to component development easy and fun, like a lightning-quick rebuild process with gulp-reload, consolidated publishing, and automated deployment to github pages.
Please let me know if you think anything could be done better or you'd like to see a feature added. Issues and PR's welcome.