├── examples
├── scss
│ └── index.scss
├── .gitignore
├── dist
│ ├── react-component.min.css
│ ├── react-component.css
│ ├── react-component.css.map
│ ├── react-component.js
│ └── react-component.js.map
├── .npmignore
├── .travis.yml
├── .babelrc
├── gulpfile.js
├── examples
│ ├── src
│ │ ├── js
│ │ │ ├── components
│ │ │ │ ├── App.scss
│ │ │ │ ├── App.js
│ │ │ │ └── Login.js
│ │ │ └── app.js
│ │ ├── c.html
│ │ └── index.html
│ └── dist
│ │ ├── b.html
│ │ ├── app.css
│ │ ├── b.css
│ │ ├── c.html
│ │ └── index.html
├── src
│ └── index.js
├── .eslintrc
├── .editorconfig
├── config.js
├── lib
│ └── index.js
├── package.json
└── README.md
├── .npmignore
├── LICENSE
├── .svnignore
├── bin
├── react-pack.js
└── react-pack-run.js
├── .babelrc
├── src
├── getServerIP.js
├── gulp
│ ├── dev.js
│ ├── bump.js
│ ├── lib.js
│ ├── examples.js
│ ├── release.js
│ └── dist.js
├── readPackageJSON.js
├── cli
│ ├── index.js
│ └── run.js
├── webpack
│ ├── dist.config.js
│ ├── examples
│ │ ├── build.js
│ │ ├── devserver.js
│ │ └── makeconfig.js
│ └── getCommon.js
└── index.js
├── .eslintrc
├── .travis.yml
├── .gitignore
├── gulpfile.js
├── lib
├── getServerIP.js
├── gulp
│ ├── lib.js
│ ├── bump.js
│ ├── dev.js
│ ├── release.js
│ ├── examples.js
│ └── dist.js
├── cli
│ ├── index.js
│ └── run.js
├── readPackageJSON.js
├── webpack
│ ├── dist.config.js
│ ├── examples
│ │ ├── build.js
│ │ ├── devserver.js
│ │ └── makeconfig.js
│ └── getCommon.js
└── index.js
├── .editorconfig
├── example_config.js
├── package.json
└── README.md
/examples/scss/index.scss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
--------------------------------------------------------------------------------
/examples/dist/react-component.min.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/.npmignore:
--------------------------------------------------------------------------------
1 | *.idea
2 | examples/
3 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | *.idea
2 |
3 | examples/
4 | src/
5 |
6 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 luqin
--------------------------------------------------------------------------------
/.svnignore:
--------------------------------------------------------------------------------
1 | *.iml
2 | .idea
3 | *.log
4 | node_modules
5 | npm-debug.log
--------------------------------------------------------------------------------
/bin/react-pack.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | require('../lib/cli');
4 |
--------------------------------------------------------------------------------
/bin/react-pack-run.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | require('../lib/cli/run');
4 |
--------------------------------------------------------------------------------
/examples/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - 'stable'
4 | - '0.12'
5 |
6 |
--------------------------------------------------------------------------------
/examples/dist/react-component.css:
--------------------------------------------------------------------------------
1 |
2 | /*# sourceMappingURL=react-component.css.map */
3 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "stage": 0,
3 | "optional": ["runtime"],
4 | "plugins": ["object-assign"]
5 | }
--------------------------------------------------------------------------------
/examples/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "stage": 0,
3 | "optional": ["runtime"],
4 | "plugins": ["object-assign"]
5 | }
--------------------------------------------------------------------------------
/src/getServerIP.js:
--------------------------------------------------------------------------------
1 | import ip from 'ip';
2 | const serverIp = ip.address();
3 |
4 | export default function getServerIP() {
5 | return serverIp;
6 | }
7 |
--------------------------------------------------------------------------------
/examples/dist/react-component.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"names":[],"mappings":"","sources":["index.scss"],"sourcesContent":[""],"file":"react-component.css","sourceRoot":"/source/"}
--------------------------------------------------------------------------------
/examples/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var initGulpTasks = require('react-component-tools');
3 | var taskConfig = require('./config');
4 |
5 | initGulpTasks(gulp, taskConfig);
6 |
--------------------------------------------------------------------------------
/examples/examples/src/js/components/App.scss:
--------------------------------------------------------------------------------
1 | .app {
2 | background-color: #cccccc;
3 | height: 100px;
4 | padding: 0 15px 0 15px;
5 | border-radius: 5px;
6 | }
7 |
8 | :fullscreen a {
9 | display: flex
10 | }
11 |
--------------------------------------------------------------------------------
/examples/examples/dist/b.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | b
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/examples/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | class ReactComponent extends React.Component {
4 |
5 | render() {
6 | return (
7 |
8 | ReactComponent
9 |
10 | );
11 | }
12 |
13 | }
14 |
15 | export default ReactComponent;
16 |
--------------------------------------------------------------------------------
/examples/examples/dist/app.css:
--------------------------------------------------------------------------------
1 | .app{background-color:#ccc;height:100px;padding:0 15px;border-radius:5px}:-webkit-full-screen a{display:-webkit-box;display:-webkit-flex;display:flex}:-moz-full-screen a{display:flex}:-ms-fullscreen a{display:-ms-flexbox;display:flex}:fullscreen a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}
--------------------------------------------------------------------------------
/examples/examples/dist/b.css:
--------------------------------------------------------------------------------
1 | .app{background-color:#ccc;height:100px;padding:0 15px;border-radius:5px}:-webkit-full-screen a{display:-webkit-box;display:-webkit-flex;display:flex}:-moz-full-screen a{display:flex}:-ms-fullscreen a{display:-ms-flexbox;display:flex}:fullscreen a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "airbnb",
3 | "globals": {
4 | "__DEV__": true
5 | },
6 | "rules": {
7 | "comma-dangle": 0,
8 | "func-names": 0,
9 | "id-length": 0,
10 | "prefer-const": 0,
11 | "react/jsx-quotes": 0,
12 | "space-before-function-paren": 0,
13 | "jsx-quotes": [2, "prefer-double"]
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "5"
4 | - "4"
5 | - "0.12"
6 | env:
7 | before_script:
8 | - npm install -g gulp
9 | - gulp -v
10 | script:
11 | - npm run lint
12 | - npm run build
13 |
14 | - rm -rf node_modules
15 |
16 | - cd examples
17 | - npm install
18 | - npm test
19 | - gulp build
20 | - gulp build --p
21 |
--------------------------------------------------------------------------------
/examples/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "airbnb",
3 | "globals": {
4 | "__DEV__": true
5 | },
6 | "rules": {
7 | "comma-dangle": 0,
8 | "func-names": 0,
9 | "id-length": 0,
10 | "prefer-const": 0,
11 | "react/jsx-quotes": 0,
12 | "space-before-function-paren": 0,
13 | "jsx-quotes": [2, "prefer-double"]
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 |
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 |
16 | # Compiled binary addons (http://nodejs.org/api/addons.html)
17 | build/Release
18 |
19 | # Dependency directory
20 | node_modules
21 |
22 | *.idea
23 |
--------------------------------------------------------------------------------
/examples/examples/src/js/components/App.js:
--------------------------------------------------------------------------------
1 | import 'bootstrap/dist/css/bootstrap.css';
2 | import './App.scss';
3 |
4 | import React from 'react';
5 | import ReactComponent from 'react-component';
6 |
7 | class App extends React.Component {
8 |
9 | render() {
10 | return (
11 |
12 |
13 |
14 | );
15 | }
16 |
17 | }
18 |
19 | export default App;
20 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var del = require('del');
3 | var babel = require('gulp-babel');
4 |
5 | gulp.task('lib:clean', del.bind(null, './lib'));
6 |
7 | gulp.task('lib', ['lib:clean'], function () {
8 | return gulp.src('./src/**/*.js')
9 | .pipe(babel())// auto use .babelrc
10 | .pipe(gulp.dest('./lib'));
11 | });
12 |
13 | gulp.task('watch:lib', ['lib'], function () {
14 | return gulp.watch('./src/**/*.js', ['lib']);
15 | });
16 |
--------------------------------------------------------------------------------
/lib/getServerIP.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];
4 |
5 | Object.defineProperty(exports, '__esModule', {
6 | value: true
7 | });
8 | exports['default'] = getServerIP;
9 |
10 | var _ip = require('ip');
11 |
12 | var _ip2 = _interopRequireDefault(_ip);
13 |
14 | var serverIp = _ip2['default'].address();
15 |
16 | function getServerIP() {
17 | return serverIp;
18 | }
19 |
20 | module.exports = exports['default'];
--------------------------------------------------------------------------------
/src/gulp/dev.js:
--------------------------------------------------------------------------------
1 | import gutil from 'gulp-util';
2 | import open from 'open';
3 |
4 | export default function (gulp, config) {
5 | let {port} = config.example;
6 |
7 | gulp.task('dev:openBrowser', function () {
8 | open(`http://localhost:${port}/`);
9 | gutil.log('open: ' + `http://localhost:${port}/`);
10 | });
11 |
12 | let devTasks = ['watch:examples'];
13 | if (config.example.openBrowser) {
14 | devTasks.push('dev:openBrowser');
15 | }
16 |
17 | gulp.task('dev', devTasks);
18 | }
19 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # http://editorconfig.org
4 |
5 | root = true
6 |
7 | [*]
8 |
9 | # Change these settings to your own preference
10 | indent_style = space
11 | indent_size = 2
12 |
13 | # We recommend you to keep these unchanged
14 | end_of_line = lf
15 | charset = utf-8
16 | trim_trailing_whitespace = true
17 | insert_final_newline = true
18 |
19 | [*.md]
20 | trim_trailing_whitespace = false
21 |
--------------------------------------------------------------------------------
/examples/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # http://editorconfig.org
4 |
5 | root = true
6 |
7 | [*]
8 |
9 | # Change these settings to your own preference
10 | indent_style = space
11 | indent_size = 2
12 |
13 | # We recommend you to keep these unchanged
14 | end_of_line = lf
15 | charset = utf-8
16 | trim_trailing_whitespace = true
17 | insert_final_newline = true
18 |
19 | [*.md]
20 | trim_trailing_whitespace = false
--------------------------------------------------------------------------------
/examples/examples/src/js/app.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | import { Router, Route } from 'react-router';
5 | import createHistory from 'history/lib/createHashHistory';
6 |
7 | const history = createHistory( { queryKey: false } );
8 |
9 | import App from './components/App';
10 |
11 | const routes = (
12 |
13 |
14 |
15 | );
16 |
17 | ReactDOM.render(routes, document.querySelector('#app'));
18 |
--------------------------------------------------------------------------------
/src/readPackageJSON.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Extract package.json metadata
3 | *
4 | * @returns {{name: string, deps: Array}}
5 | */
6 | function readPackageJSON() {
7 | let pkg = JSON.parse(require('fs').readFileSync('./package.json'));
8 | let o = {};
9 | if (pkg) {
10 | Object.assign(o, pkg.dependencies);
11 | }
12 | if (pkg.peerDependencies) {
13 | Object.assign(o, pkg.peerDependencies);
14 | }
15 | let dependencies = Object.keys(o);
16 |
17 | return {
18 | name: pkg.name,
19 | deps: dependencies
20 | };
21 | }
22 |
23 | export default readPackageJSON;
24 |
--------------------------------------------------------------------------------
/examples/examples/src/c.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | ReactComponent
7 |
8 |
9 | fff
10 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/examples/examples/dist/c.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | ReactComponent
7 |
8 |
9 | fff
10 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/examples/examples/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | ReactComponent
7 |
8 |
9 |
10 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/src/gulp/bump.js:
--------------------------------------------------------------------------------
1 | import bump from 'gulp-bump';
2 |
3 | export default function (gulp, config) { // eslint-disable-line no-unused-vars
4 | function getBumpTask(type) {
5 | let src = ['./package.json'];
6 | if (config.bump.bower) {
7 | src.push('./bower.json');
8 | }
9 |
10 | return function () {
11 | return gulp.src(src)
12 | .pipe(bump({type: type}))
13 | .pipe(gulp.dest('./'));
14 | };
15 | }
16 |
17 | gulp.task('bump', getBumpTask('patch'));
18 | gulp.task('bump:minor', getBumpTask('minor'));
19 | gulp.task('bump:major', getBumpTask('major'));
20 | }
21 |
--------------------------------------------------------------------------------
/src/gulp/lib.js:
--------------------------------------------------------------------------------
1 | let babel = require('gulp-babel');
2 | let del = require('del');
3 |
4 | module.exports = function (gulp, config) {
5 | gulp.task('clean:lib', del.bind(null, config.component.lib));
6 |
7 | gulp.task('build:lib', function () {
8 | return gulp.src([config.component.src + '/**/*.js', '!**/__tests__/**/*'])
9 | .pipe(babel())// auto use .babelrc
10 | .pipe(gulp.dest(config.component.lib));
11 | });
12 |
13 | gulp.task('watch:lib', ['build:lib'], function () {
14 | return gulp.watch([config.component.src + '/**/*.js', '!**/__tests__/**/*'], ['build:lib']);
15 | });
16 | };
17 |
--------------------------------------------------------------------------------
/lib/gulp/lib.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var babel = require('gulp-babel');
4 | var del = require('del');
5 |
6 | module.exports = function (gulp, config) {
7 | gulp.task('clean:lib', del.bind(null, config.component.lib));
8 |
9 | gulp.task('build:lib', function () {
10 | return gulp.src([config.component.src + '/**/*.js', '!**/__tests__/**/*']).pipe(babel()) // auto use .babelrc
11 | .pipe(gulp.dest(config.component.lib));
12 | });
13 |
14 | gulp.task('watch:lib', ['build:lib'], function () {
15 | return gulp.watch([config.component.src + '/**/*.js', '!**/__tests__/**/*'], ['build:lib']);
16 | });
17 | };
--------------------------------------------------------------------------------
/lib/cli/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | require('colors');
4 |
5 | var program = require('commander');
6 | var packageInfo = require('../../package.json');
7 |
8 | program.version(packageInfo.version).command('run [name]', 'run specified task').option('-v, --version').parse(process.argv);
9 |
10 | // https://github.com/tj/commander.js/pull/260
11 | var proc = program.runningCommand;
12 | if (proc) {
13 | proc.on('close', process.exit.bind(process));
14 | proc.on('error', function () {
15 | process.exit(1);
16 | });
17 | }
18 |
19 | var subCmd = program.args[0];
20 | if (!subCmd || subCmd !== 'run') {
21 | program.help();
22 | }
--------------------------------------------------------------------------------
/src/cli/index.js:
--------------------------------------------------------------------------------
1 | require('colors');
2 |
3 | let program = require('commander');
4 | let packageInfo = require('../../package.json');
5 |
6 | program
7 | .version(packageInfo.version)
8 | .command('run [name]', 'run specified task')
9 | .option('-v, --version')
10 | .parse(process.argv);
11 |
12 | // https://github.com/tj/commander.js/pull/260
13 | let proc = program.runningCommand;
14 | if (proc) {
15 | proc.on('close', process.exit.bind(process));
16 | proc.on('error', function () {
17 | process.exit(1);
18 | });
19 | }
20 |
21 | let subCmd = program.args[0];
22 | if (!subCmd || subCmd !== 'run') {
23 | program.help();
24 | }
25 |
--------------------------------------------------------------------------------
/examples/examples/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | ReactComponent
7 |
8 |
9 |
10 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/examples/examples/src/js/components/Login.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | class Login extends React.Component {
4 |
5 | constructor(props) {
6 | super(props);
7 | this.state = {
8 |
9 | };
10 |
11 | this.handleLogin = this.handleLogin.bind(this);
12 | }
13 |
14 | componentDidMount() {
15 | }
16 |
17 | handleLogin() {
18 | /*
19 | let data = {
20 | username: this.ref.username.value,
21 | pwd: this.ref.pwd.value,
22 | };
23 | */
24 | }
25 |
26 | render() {
27 | return (
28 |
29 |
34 |
35 | );
36 | }
37 | }
38 |
39 | export default Login;
40 |
--------------------------------------------------------------------------------
/lib/readPackageJSON.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Extract package.json metadata
3 | *
4 | * @returns {{name: string, deps: Array}}
5 | */
6 | 'use strict';
7 |
8 | var _extends = require('babel-runtime/helpers/extends')['default'];
9 |
10 | var _Object$keys = require('babel-runtime/core-js/object/keys')['default'];
11 |
12 | Object.defineProperty(exports, '__esModule', {
13 | value: true
14 | });
15 | function readPackageJSON() {
16 | var pkg = JSON.parse(require('fs').readFileSync('./package.json'));
17 | var o = {};
18 | if (pkg) {
19 | _extends(o, pkg.dependencies);
20 | }
21 | if (pkg.peerDependencies) {
22 | _extends(o, pkg.peerDependencies);
23 | }
24 | var dependencies = _Object$keys(o);
25 |
26 | return {
27 | name: pkg.name,
28 | deps: dependencies
29 | };
30 | }
31 |
32 | exports['default'] = readPackageJSON;
33 | module.exports = exports['default'];
--------------------------------------------------------------------------------
/lib/gulp/bump.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];
4 |
5 | Object.defineProperty(exports, '__esModule', {
6 | value: true
7 | });
8 |
9 | var _gulpBump = require('gulp-bump');
10 |
11 | var _gulpBump2 = _interopRequireDefault(_gulpBump);
12 |
13 | exports['default'] = function (gulp, config) {
14 | // eslint-disable-line no-unused-vars
15 | function getBumpTask(type) {
16 | var src = ['./package.json'];
17 | if (config.bump.bower) {
18 | src.push('./bower.json');
19 | }
20 |
21 | return function () {
22 | return gulp.src(src).pipe((0, _gulpBump2['default'])({ type: type })).pipe(gulp.dest('./'));
23 | };
24 | }
25 |
26 | gulp.task('bump', getBumpTask('patch'));
27 | gulp.task('bump:minor', getBumpTask('minor'));
28 | gulp.task('bump:major', getBumpTask('major'));
29 | };
30 |
31 | module.exports = exports['default'];
--------------------------------------------------------------------------------
/lib/gulp/dev.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];
4 |
5 | Object.defineProperty(exports, '__esModule', {
6 | value: true
7 | });
8 |
9 | var _gulpUtil = require('gulp-util');
10 |
11 | var _gulpUtil2 = _interopRequireDefault(_gulpUtil);
12 |
13 | var _open = require('open');
14 |
15 | var _open2 = _interopRequireDefault(_open);
16 |
17 | exports['default'] = function (gulp, config) {
18 | var port = config.example.port;
19 |
20 | gulp.task('dev:openBrowser', function () {
21 | (0, _open2['default'])('http://localhost:' + port + '/');
22 | _gulpUtil2['default'].log('open: ' + ('http://localhost:' + port + '/'));
23 | });
24 |
25 | var devTasks = ['watch:examples'];
26 | if (config.example.openBrowser) {
27 | devTasks.push('dev:openBrowser');
28 | }
29 |
30 | gulp.task('dev', devTasks);
31 | };
32 |
33 | module.exports = exports['default'];
--------------------------------------------------------------------------------
/examples/config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 |
3 | var taskConfig = {
4 |
5 | component: {
6 | name: 'ReactComponent',
7 | dependencies: {
8 | react: {
9 | root: 'React',
10 | commonjs2: 'react',
11 | commonjs: 'react',
12 | amd: 'react'
13 | }
14 | },
15 | scss: './scss/index.scss'
16 | },
17 |
18 | alias: {
19 | 'react-component': path.resolve(__dirname, './src')
20 | },
21 |
22 | example: {
23 | dist: './examples/dist',
24 | entry: {
25 | app: './examples/src/js/app.js',
26 | b: './examples/src/js/app.js'
27 | },
28 | html: [
29 | {
30 | chunks: ['app'],
31 | template: './examples/src/index.html'
32 | },
33 | {
34 | title: 'b',
35 | filename: 'b.html',
36 | chunks: ['b']
37 | }
38 | ],
39 | files: [
40 | './examples/src/c.html'
41 | ]
42 | }
43 |
44 | };
45 |
46 | module.exports = taskConfig;
47 |
--------------------------------------------------------------------------------
/example_config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 |
3 | var config = {
4 |
5 | component: {
6 | entry: './src/index.js',
7 | name: 'MyComponent',
8 | pkgName: 'react-component',
9 | dependencies: {
10 | classnames: 'classnames',
11 | react: {
12 | root: 'React',
13 | commonjs2: 'react',
14 | commonjs: 'react',
15 | amd: 'react'
16 | }
17 | },
18 | sass: './scss/my-component.scss' // or `less: 'less/my-component.less'`
19 | },
20 |
21 | alias: {
22 | 'react-component': path.resolve(__dirname, './src')
23 | },
24 |
25 | example: {
26 | dist: './examples/dist',
27 | entry: {
28 | app: './examples/src/app.js'
29 | },
30 | html: [
31 | {
32 | title: 'My Component 1',
33 | }, {
34 | title: 'My Component 2',
35 | template: './examples/src/index.html',
36 | }
37 | ],
38 | files: [
39 | './README.md'
40 | ],
41 |
42 | port: 3000,
43 | openBrowser: true,
44 | }
45 |
46 | };
47 |
--------------------------------------------------------------------------------
/src/webpack/dist.config.js:
--------------------------------------------------------------------------------
1 | import webpack from 'webpack';
2 | import yargs from 'yargs';
3 |
4 | import getCommon from './getCommon';
5 |
6 | export const options = yargs
7 | .alias('p', 'optimize-minimize')
8 | .alias('d', 'debug')
9 | // .option('port', {
10 | // default: '8080',
11 | // type: 'string'
12 | // })
13 | .argv;
14 |
15 | export const jsLoader = 'babel?cacheDirectory';
16 |
17 | const baseConfig = {
18 | entry: undefined,
19 | output: undefined,
20 | externals: undefined,
21 |
22 | resolveLoader: getCommon.getResolveLoader(),
23 |
24 | module: {
25 | loaders: [
26 | {test: /\.js/, exclude: /node_modules/, loader: 'babel-loader'}
27 | ]
28 | },
29 |
30 | plugins: [
31 | new webpack.DefinePlugin({
32 | 'process.env': {
33 | NODE_ENV: JSON.stringify(options.optimizeMinimize ? 'production' : 'development')
34 | }
35 | })
36 | ]
37 | };
38 |
39 | if (options.optimizeMinimize) {
40 | baseConfig.devtool = 'source-map';
41 | }
42 |
43 | export default baseConfig;
44 |
--------------------------------------------------------------------------------
/src/webpack/examples/build.js:
--------------------------------------------------------------------------------
1 | import gutil from 'gulp-util';
2 | import webpack from 'webpack';
3 |
4 | export default function (webpackConfig) {
5 | return function (callback) {
6 | webpack(webpackConfig, function (fatalError, stats) {
7 | let jsonStats = stats.toJson();
8 |
9 | // We can save jsonStats to be analyzed with
10 | // http://webpack.github.io/analyse or
11 | // https://github.com/robertknight/webpack-bundle-size-analyzer.
12 | // let fs = require('fs');
13 | // fs.writeFileSync('./bundle-stats.json', JSON.stringify(jsonStats));
14 |
15 | let buildError = fatalError || jsonStats.errors[0] || jsonStats.warnings[0];
16 |
17 | if (buildError) {
18 | throw new gutil.PluginError('webpack', buildError);
19 | }
20 |
21 | gutil.log('[webpack]', stats.toString({
22 | colors: true,
23 | version: false,
24 | hash: false,
25 | timings: false,
26 | chunks: false,
27 | chunkModules: false
28 | }));
29 |
30 | callback();
31 | });
32 | };
33 | }
34 |
--------------------------------------------------------------------------------
/src/gulp/examples.js:
--------------------------------------------------------------------------------
1 | import del from 'del';
2 | import gsize from 'gulp-size';
3 |
4 | import makeWebpackConfig from '../webpack/examples/makeconfig';
5 | import webpackBuild from '../webpack/examples/build';
6 | import webpackDevServer from '../webpack/examples/devserver';
7 |
8 | module.exports = function (gulp, config) {
9 | let exampleConfig = config.example;
10 | let {port} = config.example;
11 |
12 | gulp.task('clean:examples', del.bind(null, exampleConfig.dist));
13 |
14 | gulp.task('build:example:files', function () {
15 | return gulp.src(exampleConfig.files)
16 | .pipe(gulp.dest(exampleConfig.dist))
17 | .pipe(gsize({ title: 'build:example:files' }));
18 | });
19 |
20 | gulp.task('build:example:webpack', webpackBuild(makeWebpackConfig(false, config)));
21 | gulp.task('watch:example:webpackDevServer', webpackDevServer(makeWebpackConfig(true, config), {port}));
22 |
23 | gulp.task('build:examples', [
24 | 'build:example:files',
25 | 'build:example:webpack'
26 | ]);
27 |
28 | gulp.task('watch:examples', [
29 | 'build:example:files',
30 | 'watch:example:webpackDevServer'
31 | ], function () {
32 | gulp.watch(exampleConfig.files, ['build:example:files']);
33 | });
34 | };
35 |
--------------------------------------------------------------------------------
/src/cli/run.js:
--------------------------------------------------------------------------------
1 | require('colors');
2 |
3 | let path = require('path');
4 | let program = require('commander');
5 |
6 | program.on('--help', function help() {
7 | console.log(' Usage:'.bold.blue); // eslint-disable-line
8 | console.log(); // eslint-disable-line
9 | console.log(' $', 'react-pack run start'.magenta, ''); // eslint-disable-line
10 | console.log(' $', 'react-pack run build'.magenta, ''); // eslint-disable-line
11 | console.log(' $', 'react-pack run tag'.magenta, ''); // eslint-disable-line
12 | console.log(' $', 'react-pack run gh-pages'.magenta, ''); // eslint-disable-line
13 | console.log(); // eslint-disable-line
14 | });
15 |
16 | program.parse(process.argv);
17 |
18 | let task = program.args[0];
19 |
20 | if (!task) {
21 | program.help();
22 | } else {
23 | let gulp = require('gulp');
24 | require('../../gulpfile');
25 | let initGulpTasks = require('../../lib');
26 | let taskConfig = require(path.join(process.cwd(), './config'));
27 | initGulpTasks(gulp, taskConfig);
28 |
29 | switch (task) {
30 | case 'start':
31 | task = 'dev';
32 | break;
33 | case 'gh-pages':
34 | task = 'publish:examples';
35 | break;
36 | default:
37 | break;
38 | }
39 |
40 | gulp.start(task);
41 | }
42 |
--------------------------------------------------------------------------------
/lib/cli/run.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | require('colors');
4 |
5 | var path = require('path');
6 | var program = require('commander');
7 |
8 | program.on('--help', function help() {
9 | console.log(' Usage:'.bold.blue); // eslint-disable-line
10 | console.log(); // eslint-disable-line
11 | console.log(' $', 'react-pack run start'.magenta, ''); // eslint-disable-line
12 | console.log(' $', 'react-pack run build'.magenta, ''); // eslint-disable-line
13 | console.log(' $', 'react-pack run tag'.magenta, ''); // eslint-disable-line
14 | console.log(' $', 'react-pack run gh-pages'.magenta, ''); // eslint-disable-line
15 | console.log(); // eslint-disable-line
16 | });
17 |
18 | program.parse(process.argv);
19 |
20 | var task = program.args[0];
21 |
22 | if (!task) {
23 | program.help();
24 | } else {
25 | var gulp = require('gulp');
26 | require('../../gulpfile');
27 | var initGulpTasks = require('../../lib');
28 | var taskConfig = require(path.join(process.cwd(), './config'));
29 | initGulpTasks(gulp, taskConfig);
30 |
31 | switch (task) {
32 | case 'start':
33 | task = 'dev';
34 | break;
35 | case 'gh-pages':
36 | task = 'publish:examples';
37 | break;
38 | default:
39 | break;
40 | }
41 |
42 | gulp.start(task);
43 | }
--------------------------------------------------------------------------------
/lib/gulp/release.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var git = require('gulp-git');
4 | var deploy = require('gulp-gh-pages');
5 |
6 | module.exports = function release(gulp, config) {
7 | gulp.task('publish:tag', function (done) {
8 | var pkg = JSON.parse(require('fs').readFileSync('./package.json'));
9 | var v = 'v' + pkg.version;
10 | var message = 'Release ' + v;
11 |
12 | git.tag(v, message, function (tagErr) {
13 | if (tagErr) throw tagErr;
14 |
15 | git.push('origin', v, function (pushErr) {
16 | if (pushErr) throw pushErr;
17 | done();
18 | });
19 | });
20 | });
21 |
22 | gulp.task('publish:npm', function (done) {
23 | require('child_process').spawn('npm', ['publish'], { stdio: 'inherit' }).on('close', done);
24 | });
25 |
26 | gulp.task('publish:cnpm', function (done) {
27 | require('child_process').spawn('cnpm', ['publish'], { stdio: 'inherit' }).on('close', done);
28 | });
29 |
30 | var releaseTasks = ['publish:tag', 'publish:npm'];
31 |
32 | if (config.example) {
33 | gulp.task('publish:examples', ['build:examples'], function () {
34 | return gulp.src(config.example.dist + '/**/*').pipe(deploy());
35 | });
36 |
37 | releaseTasks.push('publish:examples');
38 | }
39 |
40 | gulp.task('release', releaseTasks);
41 | };
--------------------------------------------------------------------------------
/src/gulp/release.js:
--------------------------------------------------------------------------------
1 | let git = require('gulp-git');
2 | let deploy = require('gulp-gh-pages');
3 |
4 | module.exports = function release(gulp, config) {
5 | gulp.task('publish:tag', done => {
6 | let pkg = JSON.parse(require('fs').readFileSync('./package.json'));
7 | let v = 'v' + pkg.version;
8 | let message = 'Release ' + v;
9 |
10 | git.tag(v, message, tagErr => {
11 | if (tagErr) throw tagErr;
12 |
13 | git.push('origin', v, pushErr => {
14 | if (pushErr) throw pushErr;
15 | done();
16 | });
17 | });
18 | });
19 |
20 | gulp.task('publish:npm', function (done) {
21 | require('child_process')
22 | .spawn('npm', ['publish'], {stdio: 'inherit'})
23 | .on('close', done);
24 | });
25 |
26 | gulp.task('publish:cnpm', function (done) {
27 | require('child_process')
28 | .spawn('cnpm', ['publish'], {stdio: 'inherit'})
29 | .on('close', done);
30 | });
31 |
32 | let releaseTasks = ['publish:tag', 'publish:npm'];
33 |
34 | if (config.example) {
35 | gulp.task('publish:examples', ['build:examples'], function () {
36 | return gulp.src(config.example.dist + '/**/*').pipe(deploy());
37 | });
38 |
39 | releaseTasks.push('publish:examples');
40 | }
41 |
42 | gulp.task('release', releaseTasks);
43 | };
44 |
--------------------------------------------------------------------------------
/examples/lib/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var _get = require('babel-runtime/helpers/get')['default'];
4 |
5 | var _inherits = require('babel-runtime/helpers/inherits')['default'];
6 |
7 | var _createClass = require('babel-runtime/helpers/create-class')['default'];
8 |
9 | var _classCallCheck = require('babel-runtime/helpers/class-call-check')['default'];
10 |
11 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];
12 |
13 | Object.defineProperty(exports, '__esModule', {
14 | value: true
15 | });
16 |
17 | var _react = require('react');
18 |
19 | var _react2 = _interopRequireDefault(_react);
20 |
21 | var ReactComponent = (function (_React$Component) {
22 | _inherits(ReactComponent, _React$Component);
23 |
24 | function ReactComponent() {
25 | _classCallCheck(this, ReactComponent);
26 |
27 | _get(Object.getPrototypeOf(ReactComponent.prototype), 'constructor', this).apply(this, arguments);
28 | }
29 |
30 | _createClass(ReactComponent, [{
31 | key: 'render',
32 | value: function render() {
33 | return _react2['default'].createElement(
34 | 'div',
35 | null,
36 | 'ReactComponent'
37 | );
38 | }
39 | }]);
40 |
41 | return ReactComponent;
42 | })(_react2['default'].Component);
43 |
44 | exports['default'] = ReactComponent;
45 | module.exports = exports['default'];
--------------------------------------------------------------------------------
/examples/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-component",
3 | "version": "0.0.1",
4 | "description": "",
5 | "main": "lib/index.js",
6 | "scripts": {
7 | "build": "gulp build:lib",
8 | "gh-pages": "gulp publish:examples",
9 | "lint": "eslint src examples/src",
10 | "start": "gulp dev",
11 | "test": "npm run lint"
12 | },
13 | "repository": {
14 | "type": "git",
15 | "url": "https://github.com/luqin/react-pack"
16 | },
17 | "license": "ISC",
18 | "peerDependencies": {
19 | "react": "^0.14.0",
20 | "react-dom": "^0.14.0"
21 | },
22 | "dependencies": {
23 | "babel-runtime": "^5.8.20",
24 | "classnames": "^2.1.5"
25 | },
26 | "devDependencies": {
27 | "babel": "^5.8.38",
28 | "babel-core": "^5.8.38",
29 | "babel-eslint": "^4.1.3",
30 | "babel-plugin-object-assign": "^1.2.1",
31 | "bootstrap": "3.3.6",
32 | "eslint": "^1.7.3",
33 | "eslint-config-airbnb": "0.1.0",
34 | "eslint-plugin-react": "^3.6.3",
35 | "gulp": "^3.9.1",
36 | "history": "^1.12.3",
37 | "jquery": "^2.1.4",
38 | "react": "^0.14.0",
39 | "react-dom": "^0.14.0",
40 | "react-bootstrap": "^0.27.1",
41 | "react-component-tools": "file:../",
42 | "react-router": "1.0.0-rc3",
43 | "react-router-bootstrap": "^0.19.2"
44 | },
45 | "keywords": [
46 | "react",
47 | "react-dom",
48 | "ui",
49 | "react-component"
50 | ]
51 | }
52 |
--------------------------------------------------------------------------------
/lib/webpack/dist.config.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];
4 |
5 | Object.defineProperty(exports, '__esModule', {
6 | value: true
7 | });
8 |
9 | var _webpack = require('webpack');
10 |
11 | var _webpack2 = _interopRequireDefault(_webpack);
12 |
13 | var _yargs = require('yargs');
14 |
15 | var _yargs2 = _interopRequireDefault(_yargs);
16 |
17 | var _getCommon = require('./getCommon');
18 |
19 | var _getCommon2 = _interopRequireDefault(_getCommon);
20 |
21 | var options = _yargs2['default'].alias('p', 'optimize-minimize').alias('d', 'debug')
22 | // .option('port', {
23 | // default: '8080',
24 | // type: 'string'
25 | // })
26 | .argv;
27 |
28 | exports.options = options;
29 | var jsLoader = 'babel?cacheDirectory';
30 |
31 | exports.jsLoader = jsLoader;
32 | var baseConfig = {
33 | entry: undefined,
34 | output: undefined,
35 | externals: undefined,
36 |
37 | resolveLoader: _getCommon2['default'].getResolveLoader(),
38 |
39 | module: {
40 | loaders: [{ test: /\.js/, exclude: /node_modules/, loader: 'babel-loader' }]
41 | },
42 |
43 | plugins: [new _webpack2['default'].DefinePlugin({
44 | 'process.env': {
45 | NODE_ENV: JSON.stringify(options.optimizeMinimize ? 'production' : 'development')
46 | }
47 | })]
48 | };
49 |
50 | if (options.optimizeMinimize) {
51 | baseConfig.devtool = 'source-map';
52 | }
53 |
54 | exports['default'] = baseConfig;
--------------------------------------------------------------------------------
/lib/webpack/examples/build.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];
4 |
5 | Object.defineProperty(exports, '__esModule', {
6 | value: true
7 | });
8 |
9 | var _gulpUtil = require('gulp-util');
10 |
11 | var _gulpUtil2 = _interopRequireDefault(_gulpUtil);
12 |
13 | var _webpack = require('webpack');
14 |
15 | var _webpack2 = _interopRequireDefault(_webpack);
16 |
17 | exports['default'] = function (webpackConfig) {
18 | return function (callback) {
19 | (0, _webpack2['default'])(webpackConfig, function (fatalError, stats) {
20 | var jsonStats = stats.toJson();
21 |
22 | // We can save jsonStats to be analyzed with
23 | // http://webpack.github.io/analyse or
24 | // https://github.com/robertknight/webpack-bundle-size-analyzer.
25 | // let fs = require('fs');
26 | // fs.writeFileSync('./bundle-stats.json', JSON.stringify(jsonStats));
27 |
28 | var buildError = fatalError || jsonStats.errors[0] || jsonStats.warnings[0];
29 |
30 | if (buildError) {
31 | throw new _gulpUtil2['default'].PluginError('webpack', buildError);
32 | }
33 |
34 | _gulpUtil2['default'].log('[webpack]', stats.toString({
35 | colors: true,
36 | version: false,
37 | hash: false,
38 | timings: false,
39 | chunks: false,
40 | chunkModules: false
41 | }));
42 |
43 | callback();
44 | });
45 | };
46 | };
47 |
48 | module.exports = exports['default'];
--------------------------------------------------------------------------------
/src/webpack/examples/devserver.js:
--------------------------------------------------------------------------------
1 | import gutil from 'gulp-util';
2 | import webpack from 'webpack';
3 | import WebpackDevServer from 'webpack-dev-server';
4 |
5 | import getServerIP from '../../getServerIP';
6 |
7 | export default function (webpackConfig, serverConfig) {
8 | let {port} = serverConfig;
9 | const serverIP = getServerIP();
10 | return function (callback) {
11 | new WebpackDevServer(webpack(webpackConfig), {
12 | contentBase: webpackConfig.output.path,
13 | hot: true,
14 | publicPath: webpackConfig.output.publicPath,
15 | // Unfortunately quiet swallows everything even error so it can't be used.
16 | quiet: false,
17 | // No info filters only initial compilation it seems.
18 | noInfo: false,
19 | // Remove console.log mess during watch.
20 | stats: {
21 | assets: false,
22 | colors: true,
23 | version: false,
24 | hash: false,
25 | timings: true,
26 | chunks: false,
27 | chunkModules: false
28 | },
29 | headers: { 'Access-Control-Allow-Origin': '*', 'X-react-component-tools': 'true' },
30 | // Why '0.0.0.0' and 'localhost'? Because it works for remote machines.
31 | // https://github.com/webpack/webpack-dev-server/issues/151#issuecomment-104643642
32 | }).listen(port, '0.0.0.0', function (err) {
33 | // Callback is called only once, can't be used to catch compilation errors.
34 | if (err) {
35 | throw new gutil.PluginError('webpack-dev-server', err);
36 | }
37 | gutil.log('[webpack-dev-server]', `${serverIP}:${port}/`);
38 |
39 | callback();
40 | });
41 | };
42 | }
43 |
--------------------------------------------------------------------------------
/examples/README.md:
--------------------------------------------------------------------------------
1 | # React component starter
2 |
3 | [![NPM version][npm-badge]][npm] [![Build Status][travis-ci-image]][travis-ci-url]
4 |
5 | [![Dependency Status][deps-badge]][deps]
6 | [![devDependency Status][dev-deps-badge]][dev-deps]
7 | [![peerDependency Status][peer-deps-badge]][peer-deps]
8 |
9 | ## Features
10 |
11 | *
12 |
13 | ## Installation
14 |
15 | ```
16 | npm install react-component-starter --save
17 | ```
18 |
19 | ## Usage
20 |
21 | ```
22 | import ReactComponent from 'react-component';
23 |
24 |
25 | ```
26 |
27 | More examples: [Online demo](http://luqin.github.io/react-component-starter), [Source](https://github.com/luqin/react-component-starter/tree/master/examples)
28 |
29 | ## Browser support
30 |
31 | * Google Chrome
32 | * Firefox (2+)
33 | * IE (9+)
34 | * Opera (11.6+)
35 | * Safari (6+)
36 |
37 | ## Local Setup
38 |
39 | * Install the dependencies with `npm install`
40 | * Run the docs site in development mode with `npm start`. This will watch for file changes as you work. And auto refresh the page to see the updates.
41 |
42 | [npm-badge]: http://badge.fury.io/js/react-component-starter.svg
43 | [npm]: https://www.npmjs.com/package/react-component-starter
44 |
45 | [deps-badge]: https://david-dm.org/luqin/react-component-starter.svg
46 | [deps]: https://david-dm.org/luqin/react-component-starter
47 |
48 | [dev-deps-badge]: https://david-dm.org/luqin/react-component-starter/dev-status.svg
49 | [dev-deps]: https://david-dm.org/luqin/react-component-starter#info=devDependencies
50 |
51 | [peer-deps-badge]: https://david-dm.org/luqin/react-component-starter/peer-status.svg
52 | [peer-deps]: https://david-dm.org/luqin/react-component-starter#info=peerDependencies
53 |
54 | [travis-ci-image]: https://travis-ci.org/luqin/react-component-starter.svg
55 | [travis-ci-url]: https://travis-ci.org/luqin/react-component-starter
56 |
--------------------------------------------------------------------------------
/lib/gulp/examples.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];
4 |
5 | var _del = require('del');
6 |
7 | var _del2 = _interopRequireDefault(_del);
8 |
9 | var _gulpSize = require('gulp-size');
10 |
11 | var _gulpSize2 = _interopRequireDefault(_gulpSize);
12 |
13 | var _webpackExamplesMakeconfig = require('../webpack/examples/makeconfig');
14 |
15 | var _webpackExamplesMakeconfig2 = _interopRequireDefault(_webpackExamplesMakeconfig);
16 |
17 | var _webpackExamplesBuild = require('../webpack/examples/build');
18 |
19 | var _webpackExamplesBuild2 = _interopRequireDefault(_webpackExamplesBuild);
20 |
21 | var _webpackExamplesDevserver = require('../webpack/examples/devserver');
22 |
23 | var _webpackExamplesDevserver2 = _interopRequireDefault(_webpackExamplesDevserver);
24 |
25 | module.exports = function (gulp, config) {
26 | var exampleConfig = config.example;
27 | var port = config.example.port;
28 |
29 | gulp.task('clean:examples', _del2['default'].bind(null, exampleConfig.dist));
30 |
31 | gulp.task('build:example:files', function () {
32 | return gulp.src(exampleConfig.files).pipe(gulp.dest(exampleConfig.dist)).pipe((0, _gulpSize2['default'])({ title: 'build:example:files' }));
33 | });
34 |
35 | gulp.task('build:example:webpack', (0, _webpackExamplesBuild2['default'])((0, _webpackExamplesMakeconfig2['default'])(false, config)));
36 | gulp.task('watch:example:webpackDevServer', (0, _webpackExamplesDevserver2['default'])((0, _webpackExamplesMakeconfig2['default'])(true, config), { port: port }));
37 |
38 | gulp.task('build:examples', ['build:example:files', 'build:example:webpack']);
39 |
40 | gulp.task('watch:examples', ['build:example:files', 'watch:example:webpackDevServer'], function () {
41 | gulp.watch(exampleConfig.files, ['build:example:files']);
42 | });
43 | };
--------------------------------------------------------------------------------
/src/webpack/getCommon.js:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import autoprefixer from 'autoprefixer';
3 | let ExtractTextPlugin = require('extract-text-webpack-plugin');
4 |
5 | const AUTOPREFIXER_BROWSERS = [
6 | 'Android 2.3',
7 | 'Android >= 4',
8 | 'Chrome >= 35',
9 | 'Firefox >= 31',
10 | 'Explorer >= 9',
11 | 'iOS >= 7',
12 | 'Opera >= 12',
13 | 'Safari >= 7.1'
14 | ];
15 |
16 | export default {
17 | getResolveLoader: function () {
18 | return {
19 | root: path.join(__dirname, '../../node_modules')
20 | };
21 | },
22 |
23 | getLoaders() {
24 | return [
25 | { test: /\.txt/, loader: 'file-loader?name=[name]-[hash].[ext]' },
26 | { test: /\.gif/, loader: 'url-loader?limit=10000&mimetype=image/gif' },
27 | { test: /\.jpg/, loader: 'url-loader?limit=10000&mimetype=image/jpg' },
28 | { test: /\.png/, loader: 'url-loader?limit=10000&mimetype=image/png' },
29 | { test: /\.svg/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
30 | { test: /\.eot/, loader: 'url-loader?limit=100000&mimetype=application/vnd.ms-fontobject' },
31 | { test: /\.woff2/, loader: 'url-loader?limit=100000&mimetype=application/font-woff2' },
32 | { test: /\.woff/, loader: 'url-loader?limit=100000&mimetype=application/font-woff' },
33 | { test: /\.ttf/, loader: 'url-loader?limit=100000&mimetype=application/font-ttf' }
34 | ];
35 | },
36 |
37 | getCssLoaders(isDevelopment) {
38 | let cssLoaders = {
39 | css: '',
40 | less: '!less-loader?sourceMap',
41 | scss: '!sass-loader?sourceMap',
42 | sass: '!sass-loader?indentedSyntax',
43 | styl: '!stylus-loader'
44 | };
45 |
46 | return Object.keys(cssLoaders).map(ext => {
47 | let prefix = 'css-loader?sourceMap!postcss-loader';
48 | let extLoaders = prefix + cssLoaders[ext];
49 | let loader = isDevelopment ?
50 | 'style-loader!' + extLoaders
51 | : ExtractTextPlugin.extract('style-loader', extLoaders);
52 | return {
53 | loader: loader,
54 | test: new RegExp('\\.(' + ext + ')$')
55 | };
56 | });
57 | },
58 |
59 | getPostcssConfig() {
60 | return [autoprefixer({ browsers: AUTOPREFIXER_BROWSERS })];
61 | }
62 | };
63 |
--------------------------------------------------------------------------------
/lib/webpack/examples/devserver.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];
4 |
5 | Object.defineProperty(exports, '__esModule', {
6 | value: true
7 | });
8 |
9 | var _gulpUtil = require('gulp-util');
10 |
11 | var _gulpUtil2 = _interopRequireDefault(_gulpUtil);
12 |
13 | var _webpack = require('webpack');
14 |
15 | var _webpack2 = _interopRequireDefault(_webpack);
16 |
17 | var _webpackDevServer = require('webpack-dev-server');
18 |
19 | var _webpackDevServer2 = _interopRequireDefault(_webpackDevServer);
20 |
21 | var _getServerIP = require('../../getServerIP');
22 |
23 | var _getServerIP2 = _interopRequireDefault(_getServerIP);
24 |
25 | exports['default'] = function (webpackConfig, serverConfig) {
26 | var port = serverConfig.port;
27 |
28 | var serverIP = (0, _getServerIP2['default'])();
29 | return function (callback) {
30 | new _webpackDevServer2['default']((0, _webpack2['default'])(webpackConfig), {
31 | contentBase: webpackConfig.output.path,
32 | hot: true,
33 | publicPath: webpackConfig.output.publicPath,
34 | // Unfortunately quiet swallows everything even error so it can't be used.
35 | quiet: false,
36 | // No info filters only initial compilation it seems.
37 | noInfo: false,
38 | // Remove console.log mess during watch.
39 | stats: {
40 | assets: false,
41 | colors: true,
42 | version: false,
43 | hash: false,
44 | timings: true,
45 | chunks: false,
46 | chunkModules: false
47 | },
48 | headers: { 'Access-Control-Allow-Origin': '*', 'X-react-component-tools': 'true' }
49 | }). // Why '0.0.0.0' and 'localhost'? Because it works for remote machines.
50 | // https://github.com/webpack/webpack-dev-server/issues/151#issuecomment-104643642
51 | listen(port, '0.0.0.0', function (err) {
52 | // Callback is called only once, can't be used to catch compilation errors.
53 | if (err) {
54 | throw new _gulpUtil2['default'].PluginError('webpack-dev-server', err);
55 | }
56 | _gulpUtil2['default'].log('[webpack-dev-server]', serverIP + ':' + port + '/');
57 |
58 | callback();
59 | });
60 | };
61 | };
62 |
63 | module.exports = exports['default'];
--------------------------------------------------------------------------------
/lib/webpack/getCommon.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var _Object$keys = require('babel-runtime/core-js/object/keys')['default'];
4 |
5 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];
6 |
7 | Object.defineProperty(exports, '__esModule', {
8 | value: true
9 | });
10 |
11 | var _path = require('path');
12 |
13 | var _path2 = _interopRequireDefault(_path);
14 |
15 | var _autoprefixer = require('autoprefixer');
16 |
17 | var _autoprefixer2 = _interopRequireDefault(_autoprefixer);
18 |
19 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
20 |
21 | var AUTOPREFIXER_BROWSERS = ['Android 2.3', 'Android >= 4', 'Chrome >= 35', 'Firefox >= 31', 'Explorer >= 9', 'iOS >= 7', 'Opera >= 12', 'Safari >= 7.1'];
22 |
23 | exports['default'] = {
24 | getResolveLoader: function getResolveLoader() {
25 | return {
26 | root: _path2['default'].join(__dirname, '../../node_modules')
27 | };
28 | },
29 |
30 | getLoaders: function getLoaders() {
31 | return [{ test: /\.txt/, loader: 'file-loader?name=[name]-[hash].[ext]' }, { test: /\.gif/, loader: 'url-loader?limit=10000&mimetype=image/gif' }, { test: /\.jpg/, loader: 'url-loader?limit=10000&mimetype=image/jpg' }, { test: /\.png/, loader: 'url-loader?limit=10000&mimetype=image/png' }, { test: /\.svg/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' }, { test: /\.eot/, loader: 'url-loader?limit=100000&mimetype=application/vnd.ms-fontobject' }, { test: /\.woff2/, loader: 'url-loader?limit=100000&mimetype=application/font-woff2' }, { test: /\.woff/, loader: 'url-loader?limit=100000&mimetype=application/font-woff' }, { test: /\.ttf/, loader: 'url-loader?limit=100000&mimetype=application/font-ttf' }];
32 | },
33 |
34 | getCssLoaders: function getCssLoaders(isDevelopment) {
35 | var cssLoaders = {
36 | css: '',
37 | less: '!less-loader?sourceMap',
38 | scss: '!sass-loader?sourceMap',
39 | sass: '!sass-loader?indentedSyntax',
40 | styl: '!stylus-loader'
41 | };
42 |
43 | return _Object$keys(cssLoaders).map(function (ext) {
44 | var prefix = 'css-loader?sourceMap!postcss-loader';
45 | var extLoaders = prefix + cssLoaders[ext];
46 | var loader = isDevelopment ? 'style-loader!' + extLoaders : ExtractTextPlugin.extract('style-loader', extLoaders);
47 | return {
48 | loader: loader,
49 | test: new RegExp('\\.(' + ext + ')$')
50 | };
51 | });
52 | },
53 |
54 | getPostcssConfig: function getPostcssConfig() {
55 | return [(0, _autoprefixer2['default'])({ browsers: AUTOPREFIXER_BROWSERS })];
56 | }
57 | };
58 | module.exports = exports['default'];
--------------------------------------------------------------------------------
/src/gulp/dist.js:
--------------------------------------------------------------------------------
1 | import del from 'del';
2 | import gutil from 'gulp-util';
3 | import less from 'gulp-less';
4 | import sass from 'gulp-sass';
5 | import cleanCSS from 'gulp-clean-css';
6 | import rename from 'gulp-rename';
7 | import sourcemaps from 'gulp-sourcemaps';
8 | import gsize from 'gulp-size';
9 | import runSequence from 'run-sequence';
10 | import webpack from 'webpack';
11 |
12 | import baseConfig from '../webpack/dist.config';
13 |
14 | export default function (gulp, config) {
15 | gulp.task('clean:dist', del.bind(null, config.component.dist));
16 |
17 | gulp.task('build:dist:scripts', function (cb) {
18 | let webpackConfig = Object.assign({}, baseConfig, {
19 | entry: {
20 | [config.component.pkgName]: config.component.entry
21 | },
22 |
23 | output: {
24 | path: config.component.dist,
25 | filename: '[name].js',
26 | library: config.component.name,
27 | libraryTarget: 'umd'
28 | },
29 |
30 | devtool: 'source-map',
31 |
32 | externals: config.component.dependencies
33 | });
34 |
35 | webpack(webpackConfig, function (err, stats) {
36 | if (err) {
37 | throw new gutil.PluginError('build:dist:scripts', err);
38 | }
39 | gutil.log('[build:dist:scripts]', stats.toString({
40 | colors: true
41 | }));
42 |
43 | cb();
44 | });
45 | });
46 |
47 | let buildTasks = ['build:dist:scripts'];
48 |
49 | if (config.component.less) {
50 | gulp.task('build:dist:less', function () {
51 | let dist = config.component.dist;
52 | return gulp.src(config.component.less)
53 | .pipe(sourcemaps.init())
54 | .pipe(less())
55 | .pipe(rename(config.component.pkgName + '.css'))
56 | .pipe(sourcemaps.write('./'))
57 | .pipe(gulp.dest(dist))
58 | .pipe(rename(config.component.pkgName + '.min.css'))
59 | .pipe(cleanCSS())
60 | .pipe(gulp.dest(dist))
61 | .pipe(gsize({ title: 'build:dist:less' }));
62 | });
63 | buildTasks.push('build:dist:less');
64 | }
65 |
66 | function buildScss(src, dist, title) {
67 | return gulp.src(src)
68 | .pipe(sourcemaps.init())
69 | .pipe(sass())
70 | .pipe(rename(config.component.pkgName + '.css'))
71 | .pipe(sourcemaps.write('./'))
72 | .on('error', console.error.bind(console)) // eslint-disable-line no-console
73 | .pipe(gulp.dest(dist))
74 | .pipe(rename(config.component.pkgName + '.min.css'))
75 | .pipe(cleanCSS())
76 | .pipe(gulp.dest(dist))
77 | .pipe(gsize({ title: title }));
78 | }
79 |
80 | if (config.component.scss) {
81 | gulp.task('build:dist:scss', function () {
82 | return buildScss(config.component.scss, config.component.dist, 'build:dist:scss');
83 | });
84 | buildTasks.push('build:dist:scss');
85 | }
86 |
87 | gulp.task('build:dist', ['clean:dist'], function (cb) {
88 | runSequence(buildTasks, cb);
89 | });
90 | }
91 |
92 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-component-tools",
3 | "version": "1.1.2",
4 | "description": "Common gulp tasks for building react components, examples. Webpack, Gulp, Babel, SASS, LESS, Live reload, React hot reload",
5 | "main": "lib/index.js",
6 | "bin": {
7 | "rt": "./bin/react-pack.js",
8 | "rt-run": "./bin/react-pack-run.js"
9 | },
10 | "scripts": {
11 | "build": "gulp lib",
12 | "lint": "eslint src",
13 | "test": ""
14 | },
15 | "peerDependencies": {
16 | "gulp": "^3.9.1",
17 | "babel": "^5.8.23"
18 | },
19 | "dependencies": {
20 | "autoprefixer": "^6.3.6",
21 | "babel": "^5.8.38",
22 | "babel-core": "^5.8.38",
23 | "babel-loader": "^5.3.2",
24 | "babel-plugin-object-assign": "^1.2.1",
25 | "babel-runtime": "^5.8.38",
26 | "camelcase": "^2.1.1",
27 | "capitalize": "^1.0.0",
28 | "colors": "^1.1.2",
29 | "commander": "^2.9.0",
30 | "css-loader": "^0.23.1",
31 | "defaults": "^1.0.3",
32 | "del": "^2.2.0",
33 | "extract-text-webpack-plugin": "^1.0.1",
34 | "file-loader": "^0.8.5",
35 | "gulp-babel": "^5.2.1",
36 | "gulp-bump": "^2.1.0",
37 | "gulp-clean-css": "^2.0.6",
38 | "gulp-gh-pages": "^0.5.4",
39 | "gulp-git": "^1.7.1",
40 | "gulp-less": "^3.0.5",
41 | "gulp-rename": "^1.2.2",
42 | "gulp-replace": "^0.5.4",
43 | "gulp-sass": "^2.3.1",
44 | "gulp-size": "^2.1.0",
45 | "gulp-sourcemaps": "^1.6.0",
46 | "gulp-uglify": "^1.5.3",
47 | "gulp-util": "^3.0.7",
48 | "html-loader": "^0.4.3",
49 | "html-webpack-plugin": "^2.16.0",
50 | "ip": "^1.1.2",
51 | "json-loader": "^0.5.4",
52 | "less": "^2.6.1",
53 | "less-loader": "^2.2.3",
54 | "lodash": "^4.8.2",
55 | "node-notifier": "^4.5.0",
56 | "node-sass": "3.6.0",
57 | "nyan-progress-webpack-plugin": "^1.1.4",
58 | "open": "0.0.5",
59 | "postcss-loader": "^0.8.2",
60 | "react-hot-loader": "^1.3.0",
61 | "react-proxy-loader": "^0.3.4",
62 | "react-router-loader": "^0.5.4",
63 | "run-sequence": "^1.1.5",
64 | "sass-loader": "3.2.0",
65 | "script-loader": "^0.7.0",
66 | "style-loader": "^0.13.1",
67 | "stylus-loader": "^2.0.0",
68 | "transfer-webpack-plugin": "^0.1.4",
69 | "url-loader": "^0.5.7",
70 | "webpack": "^1.13.0",
71 | "webpack-dev-server": "^1.14.1",
72 | "webpack-plugin-notifier": "0.1.0",
73 | "yargs": "^4.6.0"
74 | },
75 | "devDependencies": {
76 | "babel-eslint": "^4.1.1",
77 | "eslint": "1.9.0",
78 | "eslint-config-airbnb": "1.0.0",
79 | "eslint-plugin-react": "3.8.0",
80 | "gulp": "^3.9.1"
81 | },
82 | "repository": {
83 | "type": "git",
84 | "url": "https://github.com/luqin/react-component-tools"
85 | },
86 | "keywords": [
87 | "react",
88 | "webpack",
89 | "gulp",
90 | "hot-load",
91 | "sass",
92 | "scss",
93 | "less",
94 | "web",
95 | "hot-load",
96 | "react-component",
97 | "tool",
98 | "task"
99 | ]
100 | }
101 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import defaults from 'defaults';
2 | import capitalize from 'capitalize';
3 | import camelCase from 'camelcase';
4 | import _ from 'lodash';
5 | import yargs from 'yargs';
6 | import gutil from 'gulp-util';
7 |
8 | import readPackageJSON from './readPackageJSON';
9 |
10 | function prepareConfig(_config) {
11 | const pkg = readPackageJSON();
12 | const name = capitalize(camelCase(_config.component.pkgName || pkg.name));
13 |
14 | let config = defaults(_config, { alias: pkg.alias });
15 |
16 | // component
17 | config.component = defaults(config.component, {
18 | entry: './src/index.js',
19 | pkgName: pkg.name,
20 | name: name,
21 | dependencies: pkg.deps,
22 | src: './src',
23 | lib: './lib',
24 | dist: './dist',
25 | });
26 |
27 | config.bump = config.bump || {};
28 | config.bump = defaults(config.bump, {
29 | npm: true,
30 | bower: false,
31 | });
32 |
33 | // example
34 | if (config.example) {
35 | if (config.example === true) {
36 | config.example = {};
37 | }
38 |
39 | defaults(config.example, {
40 | dist: './examples/dist',
41 | entry: './examples/src/app.js',
42 | files: [],
43 |
44 | port: 8888,
45 | openBrowser: true,
46 | });
47 |
48 | let { entry, html } = config.example;
49 |
50 | if (typeof entry === 'string') {
51 | config.example.entry = {
52 | app: entry
53 | };
54 | }
55 |
56 | if (!html) {
57 | html = [{
58 | title: pkg.name,
59 | }];
60 | }
61 | if (!_.isArray(html)) {
62 | html = [html];
63 | }
64 |
65 | config.example.html = html.map(item => {
66 | let h;
67 |
68 | if (typeof item === 'string') {
69 | h = {
70 | title: pkg.name,
71 | template: item,
72 | };
73 | } else {
74 | h = item;
75 | }
76 |
77 | return h;
78 | });
79 | }
80 |
81 | return config;
82 | }
83 |
84 | /**
85 | * This package exports a function that binds tasks to a gulp instance
86 | * based on the provided config.
87 | */
88 | function initTasks(gulp, _config) {
89 | const args = yargs
90 | .alias('p', 'production')
91 | .argv;
92 | let config = prepareConfig(_config);
93 |
94 | gutil.log('[react-component-tools] init...');
95 |
96 | gulp.task('env', () => {
97 | process.env.NODE_ENV = args.production ? 'production' : 'development'; // eslint-disable-line no-undef
98 | });
99 |
100 | require('./gulp/bump')(gulp, config);
101 | require('./gulp/dev')(gulp, config);
102 | require('./gulp/dist')(gulp, config);
103 | require('./gulp/release')(gulp, config);
104 |
105 | let buildTasks = ['build:dist'];
106 | let cleanTasks = ['clean:dist'];
107 |
108 | if (config.component.lib) {
109 | require('./gulp/lib')(gulp, config);
110 | buildTasks.push('build:lib');
111 | cleanTasks.push('clean:lib');
112 | }
113 |
114 | if (config.example) {
115 | require('./gulp/examples')(gulp, config);
116 | buildTasks.push('build:examples');
117 | cleanTasks.push('clean:examples');
118 | }
119 |
120 | gulp.task('build', buildTasks);
121 | gulp.task('clean', cleanTasks);
122 | }
123 |
124 | module.exports = initTasks;
125 | module.exports.readPackageJSON = readPackageJSON;
126 |
--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];
4 |
5 | var _defaults = require('defaults');
6 |
7 | var _defaults2 = _interopRequireDefault(_defaults);
8 |
9 | var _capitalize = require('capitalize');
10 |
11 | var _capitalize2 = _interopRequireDefault(_capitalize);
12 |
13 | var _camelcase = require('camelcase');
14 |
15 | var _camelcase2 = _interopRequireDefault(_camelcase);
16 |
17 | var _lodash = require('lodash');
18 |
19 | var _lodash2 = _interopRequireDefault(_lodash);
20 |
21 | var _yargs = require('yargs');
22 |
23 | var _yargs2 = _interopRequireDefault(_yargs);
24 |
25 | var _gulpUtil = require('gulp-util');
26 |
27 | var _gulpUtil2 = _interopRequireDefault(_gulpUtil);
28 |
29 | var _readPackageJSON = require('./readPackageJSON');
30 |
31 | var _readPackageJSON2 = _interopRequireDefault(_readPackageJSON);
32 |
33 | function prepareConfig(_config) {
34 | var pkg = (0, _readPackageJSON2['default'])();
35 | var name = (0, _capitalize2['default'])((0, _camelcase2['default'])(_config.component.pkgName || pkg.name));
36 |
37 | var config = (0, _defaults2['default'])(_config, { alias: pkg.alias });
38 |
39 | // component
40 | config.component = (0, _defaults2['default'])(config.component, {
41 | entry: './src/index.js',
42 | pkgName: pkg.name,
43 | name: name,
44 | dependencies: pkg.deps,
45 | src: './src',
46 | lib: './lib',
47 | dist: './dist'
48 | });
49 |
50 | config.bump = config.bump || {};
51 | config.bump = (0, _defaults2['default'])(config.bump, {
52 | npm: true,
53 | bower: false
54 | });
55 |
56 | // example
57 | if (config.example) {
58 | if (config.example === true) {
59 | config.example = {};
60 | }
61 |
62 | (0, _defaults2['default'])(config.example, {
63 | dist: './examples/dist',
64 | entry: './examples/src/app.js',
65 | files: [],
66 |
67 | port: 8888,
68 | openBrowser: true
69 | });
70 |
71 | var _config$example = config.example;
72 | var entry = _config$example.entry;
73 | var html = _config$example.html;
74 |
75 | if (typeof entry === 'string') {
76 | config.example.entry = {
77 | app: entry
78 | };
79 | }
80 |
81 | if (!html) {
82 | html = [{
83 | title: pkg.name
84 | }];
85 | }
86 | if (!_lodash2['default'].isArray(html)) {
87 | html = [html];
88 | }
89 |
90 | config.example.html = html.map(function (item) {
91 | var h = undefined;
92 |
93 | if (typeof item === 'string') {
94 | h = {
95 | title: pkg.name,
96 | template: item
97 | };
98 | } else {
99 | h = item;
100 | }
101 |
102 | return h;
103 | });
104 | }
105 |
106 | return config;
107 | }
108 |
109 | /**
110 | * This package exports a function that binds tasks to a gulp instance
111 | * based on the provided config.
112 | */
113 | function initTasks(gulp, _config) {
114 | var args = _yargs2['default'].alias('p', 'production').argv;
115 | var config = prepareConfig(_config);
116 |
117 | _gulpUtil2['default'].log('[react-component-tools] init...');
118 |
119 | gulp.task('env', function () {
120 | process.env.NODE_ENV = args.production ? 'production' : 'development'; // eslint-disable-line no-undef
121 | });
122 |
123 | require('./gulp/bump')(gulp, config);
124 | require('./gulp/dev')(gulp, config);
125 | require('./gulp/dist')(gulp, config);
126 | require('./gulp/release')(gulp, config);
127 |
128 | var buildTasks = ['build:dist'];
129 | var cleanTasks = ['clean:dist'];
130 |
131 | if (config.component.lib) {
132 | require('./gulp/lib')(gulp, config);
133 | buildTasks.push('build:lib');
134 | cleanTasks.push('clean:lib');
135 | }
136 |
137 | if (config.example) {
138 | require('./gulp/examples')(gulp, config);
139 | buildTasks.push('build:examples');
140 | cleanTasks.push('clean:examples');
141 | }
142 |
143 | gulp.task('build', buildTasks);
144 | gulp.task('clean', cleanTasks);
145 | }
146 |
147 | module.exports = initTasks;
148 | module.exports.readPackageJSON = _readPackageJSON2['default'];
--------------------------------------------------------------------------------
/lib/gulp/dist.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var _extends = require('babel-runtime/helpers/extends')['default'];
4 |
5 | var _defineProperty = require('babel-runtime/helpers/define-property')['default'];
6 |
7 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];
8 |
9 | Object.defineProperty(exports, '__esModule', {
10 | value: true
11 | });
12 |
13 | var _del = require('del');
14 |
15 | var _del2 = _interopRequireDefault(_del);
16 |
17 | var _gulpUtil = require('gulp-util');
18 |
19 | var _gulpUtil2 = _interopRequireDefault(_gulpUtil);
20 |
21 | var _gulpLess = require('gulp-less');
22 |
23 | var _gulpLess2 = _interopRequireDefault(_gulpLess);
24 |
25 | var _gulpSass = require('gulp-sass');
26 |
27 | var _gulpSass2 = _interopRequireDefault(_gulpSass);
28 |
29 | var _gulpCleanCss = require('gulp-clean-css');
30 |
31 | var _gulpCleanCss2 = _interopRequireDefault(_gulpCleanCss);
32 |
33 | var _gulpRename = require('gulp-rename');
34 |
35 | var _gulpRename2 = _interopRequireDefault(_gulpRename);
36 |
37 | var _gulpSourcemaps = require('gulp-sourcemaps');
38 |
39 | var _gulpSourcemaps2 = _interopRequireDefault(_gulpSourcemaps);
40 |
41 | var _gulpSize = require('gulp-size');
42 |
43 | var _gulpSize2 = _interopRequireDefault(_gulpSize);
44 |
45 | var _runSequence = require('run-sequence');
46 |
47 | var _runSequence2 = _interopRequireDefault(_runSequence);
48 |
49 | var _webpack = require('webpack');
50 |
51 | var _webpack2 = _interopRequireDefault(_webpack);
52 |
53 | var _webpackDistConfig = require('../webpack/dist.config');
54 |
55 | var _webpackDistConfig2 = _interopRequireDefault(_webpackDistConfig);
56 |
57 | exports['default'] = function (gulp, config) {
58 | gulp.task('clean:dist', _del2['default'].bind(null, config.component.dist));
59 |
60 | gulp.task('build:dist:scripts', function (cb) {
61 | var webpackConfig = _extends({}, _webpackDistConfig2['default'], {
62 | entry: _defineProperty({}, config.component.pkgName, config.component.entry),
63 |
64 | output: {
65 | path: config.component.dist,
66 | filename: '[name].js',
67 | library: config.component.name,
68 | libraryTarget: 'umd'
69 | },
70 |
71 | devtool: 'source-map',
72 |
73 | externals: config.component.dependencies
74 | });
75 |
76 | (0, _webpack2['default'])(webpackConfig, function (err, stats) {
77 | if (err) {
78 | throw new _gulpUtil2['default'].PluginError('build:dist:scripts', err);
79 | }
80 | _gulpUtil2['default'].log('[build:dist:scripts]', stats.toString({
81 | colors: true
82 | }));
83 |
84 | cb();
85 | });
86 | });
87 |
88 | var buildTasks = ['build:dist:scripts'];
89 |
90 | if (config.component.less) {
91 | gulp.task('build:dist:less', function () {
92 | var dist = config.component.dist;
93 | return gulp.src(config.component.less).pipe(_gulpSourcemaps2['default'].init()).pipe((0, _gulpLess2['default'])()).pipe((0, _gulpRename2['default'])(config.component.pkgName + '.css')).pipe(_gulpSourcemaps2['default'].write('./')).pipe(gulp.dest(dist)).pipe((0, _gulpRename2['default'])(config.component.pkgName + '.min.css')).pipe((0, _gulpCleanCss2['default'])()).pipe(gulp.dest(dist)).pipe((0, _gulpSize2['default'])({ title: 'build:dist:less' }));
94 | });
95 | buildTasks.push('build:dist:less');
96 | }
97 |
98 | function buildScss(src, dist, title) {
99 | return gulp.src(src).pipe(_gulpSourcemaps2['default'].init()).pipe((0, _gulpSass2['default'])()).pipe((0, _gulpRename2['default'])(config.component.pkgName + '.css')).pipe(_gulpSourcemaps2['default'].write('./')).on('error', console.error.bind(console)) // eslint-disable-line no-console
100 | .pipe(gulp.dest(dist)).pipe((0, _gulpRename2['default'])(config.component.pkgName + '.min.css')).pipe((0, _gulpCleanCss2['default'])()).pipe(gulp.dest(dist)).pipe((0, _gulpSize2['default'])({ title: title }));
101 | }
102 |
103 | if (config.component.scss) {
104 | gulp.task('build:dist:scss', function () {
105 | return buildScss(config.component.scss, config.component.dist, 'build:dist:scss');
106 | });
107 | buildTasks.push('build:dist:scss');
108 | }
109 |
110 | gulp.task('build:dist', ['clean:dist'], function (cb) {
111 | (0, _runSequence2['default'])(buildTasks, cb);
112 | });
113 | };
114 |
115 | module.exports = exports['default'];
--------------------------------------------------------------------------------
/src/webpack/examples/makeconfig.js:
--------------------------------------------------------------------------------
1 | import webpack from 'webpack';
2 | import path from 'path';
3 | import HtmlWebpackPlugin from 'html-webpack-plugin';
4 | import ExtractTextPlugin from 'extract-text-webpack-plugin';
5 | import NyanProgressPlugin from 'nyan-progress-webpack-plugin';
6 | import WebpackNotifierPlugin from 'webpack-plugin-notifier';
7 |
8 | import getServerIP from '../../getServerIP';
9 | import getWebpackCommon from '../getCommon';
10 |
11 | const serverIP = getServerIP();
12 |
13 | let devtools = process.env.CONTINUOUS_INTEGRATION
14 | ? 'inline-source-map'
15 | // cheap-module-eval-source-map, because we want original source, but we don't
16 | // care about columns, which makes this devtool faster than eval-source-map.
17 | // http://webpack.github.io/docs/configuration.html#devtool
18 | : 'cheap-module-eval-source-map';
19 |
20 | /**
21 | *
22 | * @param {Array} configs
23 | * @returns {Array}
24 | */
25 | function buildHtmlPlugins(configs) {
26 | return configs.map(item => {
27 | return new HtmlWebpackPlugin(item);
28 | });
29 | }
30 |
31 | export default function (isDevelopment, config) {
32 | let outputPath = path.resolve(config.example.dist);
33 | let {port} = config.example;
34 | let entry = {};
35 | let htmlPlugins = buildHtmlPlugins(config.example.html);
36 |
37 | Object.keys(config.example.entry).forEach(name => {
38 | let entryPath = config.example.entry[name];
39 | entry[name] = isDevelopment ? [
40 | `webpack-dev-server/client?http://${serverIP}:${port}`,
41 | // Why only-dev-server instead of dev-server:
42 | // https://github.com/webpack/webpack/issues/418#issuecomment-54288041
43 | 'webpack/hot/only-dev-server',
44 | entryPath
45 | ] : [entryPath];
46 | });
47 |
48 | return {
49 | entry: entry,
50 |
51 | cache: isDevelopment,
52 | debug: isDevelopment,
53 | devtool: isDevelopment ? devtools : '',
54 |
55 | output: isDevelopment ? {
56 | path: outputPath,
57 | filename: '[name].js',
58 | chunkFilename: '[name]-[chunkhash].js',
59 | publicPath: `http://${serverIP}:${port}/`
60 | } : {
61 | path: outputPath,
62 | filename: '[name].js',
63 | chunkFilename: '[name]-[chunkhash].js'
64 | },
65 |
66 | resolveLoader: getWebpackCommon.getResolveLoader(),
67 | module: {
68 | loaders: [{
69 | test: /\.(js|jsx)$/,
70 | exclude: /node_modules/,
71 | loaders: isDevelopment ? ['react-hot', 'babel-loader'] : ['babel-loader']
72 | }].concat(getWebpackCommon.getLoaders())
73 | .concat(getWebpackCommon.getCssLoaders(isDevelopment))
74 | },
75 |
76 | postcss: getWebpackCommon.getPostcssConfig,
77 |
78 | plugins: (function () {
79 | let plugins = [
80 | new webpack.DefinePlugin({
81 | 'process.env': {
82 | NODE_ENV: JSON.stringify(isDevelopment ? 'development' : 'production'),
83 | IS_BROWSER: true
84 | }
85 | }),
86 | new webpack.ProvidePlugin({
87 | $: 'jquery',
88 | jQuery: 'jquery',
89 | 'window.$': 'jquery',
90 | 'window.jQuery': 'jquery'
91 | }),
92 | ...htmlPlugins
93 | ];
94 | if (isDevelopment) {
95 | plugins.push(
96 | WebpackNotifierPlugin,
97 | new webpack.HotModuleReplacementPlugin()
98 | );
99 | } else {
100 | plugins.push(
101 | // Render styles into separate cacheable file to prevent FOUC and
102 | // optimize for critical rendering path.
103 | new ExtractTextPlugin('[name].css', {
104 | allChunks: true
105 | }),
106 | new NyanProgressPlugin(),
107 | new webpack.optimize.DedupePlugin(),
108 | new webpack.optimize.OccurenceOrderPlugin(),
109 | new webpack.optimize.UglifyJsPlugin({
110 | // keep_fnames prevents function name mangling.
111 | // Function names are useful. Seeing a readable error stack while
112 | // being able to programmatically analyse it is priceless. And yes,
113 | // we don't need infamous FLUX_ACTION_CONSTANTS with function name.
114 | // It's ES6 standard polyfilled by Babel.
115 | /* eslint-disable camelcase */
116 | compress: {
117 | keep_fnames: true,
118 | screw_ie8: true,
119 | warnings: false // Because uglify reports irrelevant warnings.
120 | },
121 | mangle: {
122 | keep_fnames: true
123 | }
124 | /* eslint-enable camelcase */
125 | })
126 | );
127 | }
128 | return plugins;
129 | })(),
130 | resolve: {
131 | extensions: ['', '.js', '.jsx'],
132 | modulesDirectories: ['node_modules', 'web_modules'],
133 | alias: config.alias
134 | }
135 | };
136 | }
137 |
--------------------------------------------------------------------------------
/lib/webpack/examples/makeconfig.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var _toConsumableArray = require('babel-runtime/helpers/to-consumable-array')['default'];
4 |
5 | var _Object$keys = require('babel-runtime/core-js/object/keys')['default'];
6 |
7 | var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];
8 |
9 | Object.defineProperty(exports, '__esModule', {
10 | value: true
11 | });
12 |
13 | var _webpack = require('webpack');
14 |
15 | var _webpack2 = _interopRequireDefault(_webpack);
16 |
17 | var _path = require('path');
18 |
19 | var _path2 = _interopRequireDefault(_path);
20 |
21 | var _htmlWebpackPlugin = require('html-webpack-plugin');
22 |
23 | var _htmlWebpackPlugin2 = _interopRequireDefault(_htmlWebpackPlugin);
24 |
25 | var _extractTextWebpackPlugin = require('extract-text-webpack-plugin');
26 |
27 | var _extractTextWebpackPlugin2 = _interopRequireDefault(_extractTextWebpackPlugin);
28 |
29 | var _nyanProgressWebpackPlugin = require('nyan-progress-webpack-plugin');
30 |
31 | var _nyanProgressWebpackPlugin2 = _interopRequireDefault(_nyanProgressWebpackPlugin);
32 |
33 | var _webpackPluginNotifier = require('webpack-plugin-notifier');
34 |
35 | var _webpackPluginNotifier2 = _interopRequireDefault(_webpackPluginNotifier);
36 |
37 | var _getServerIP = require('../../getServerIP');
38 |
39 | var _getServerIP2 = _interopRequireDefault(_getServerIP);
40 |
41 | var _getCommon = require('../getCommon');
42 |
43 | var _getCommon2 = _interopRequireDefault(_getCommon);
44 |
45 | var serverIP = (0, _getServerIP2['default'])();
46 |
47 | var devtools = process.env.CONTINUOUS_INTEGRATION ? 'inline-source-map'
48 | // cheap-module-eval-source-map, because we want original source, but we don't
49 | // care about columns, which makes this devtool faster than eval-source-map.
50 | // http://webpack.github.io/docs/configuration.html#devtool
51 | : 'cheap-module-eval-source-map';
52 |
53 | /**
54 | *
55 | * @param {Array} configs
56 | * @returns {Array}
57 | */
58 | function buildHtmlPlugins(configs) {
59 | return configs.map(function (item) {
60 | return new _htmlWebpackPlugin2['default'](item);
61 | });
62 | }
63 |
64 | exports['default'] = function (isDevelopment, config) {
65 | var outputPath = _path2['default'].resolve(config.example.dist);
66 | var port = config.example.port;
67 |
68 | var entry = {};
69 | var htmlPlugins = buildHtmlPlugins(config.example.html);
70 |
71 | _Object$keys(config.example.entry).forEach(function (name) {
72 | var entryPath = config.example.entry[name];
73 | entry[name] = isDevelopment ? ['webpack-dev-server/client?http://' + serverIP + ':' + port,
74 | // Why only-dev-server instead of dev-server:
75 | // https://github.com/webpack/webpack/issues/418#issuecomment-54288041
76 | 'webpack/hot/only-dev-server', entryPath] : [entryPath];
77 | });
78 |
79 | return {
80 | entry: entry,
81 |
82 | cache: isDevelopment,
83 | debug: isDevelopment,
84 | devtool: isDevelopment ? devtools : '',
85 |
86 | output: isDevelopment ? {
87 | path: outputPath,
88 | filename: '[name].js',
89 | chunkFilename: '[name]-[chunkhash].js',
90 | publicPath: 'http://' + serverIP + ':' + port + '/'
91 | } : {
92 | path: outputPath,
93 | filename: '[name].js',
94 | chunkFilename: '[name]-[chunkhash].js'
95 | },
96 |
97 | resolveLoader: _getCommon2['default'].getResolveLoader(),
98 | module: {
99 | loaders: [{
100 | test: /\.(js|jsx)$/,
101 | exclude: /node_modules/,
102 | loaders: isDevelopment ? ['react-hot', 'babel-loader'] : ['babel-loader']
103 | }].concat(_getCommon2['default'].getLoaders()).concat(_getCommon2['default'].getCssLoaders(isDevelopment))
104 | },
105 |
106 | postcss: _getCommon2['default'].getPostcssConfig,
107 |
108 | plugins: (function () {
109 | var plugins = [new _webpack2['default'].DefinePlugin({
110 | 'process.env': {
111 | NODE_ENV: JSON.stringify(isDevelopment ? 'development' : 'production'),
112 | IS_BROWSER: true
113 | }
114 | }), new _webpack2['default'].ProvidePlugin({
115 | $: 'jquery',
116 | jQuery: 'jquery',
117 | 'window.$': 'jquery',
118 | 'window.jQuery': 'jquery'
119 | })].concat(_toConsumableArray(htmlPlugins));
120 | if (isDevelopment) {
121 | plugins.push(_webpackPluginNotifier2['default'], new _webpack2['default'].HotModuleReplacementPlugin());
122 | } else {
123 | plugins.push(
124 | // Render styles into separate cacheable file to prevent FOUC and
125 | // optimize for critical rendering path.
126 | new _extractTextWebpackPlugin2['default']('[name].css', {
127 | allChunks: true
128 | }), new _nyanProgressWebpackPlugin2['default'](), new _webpack2['default'].optimize.DedupePlugin(), new _webpack2['default'].optimize.OccurenceOrderPlugin(), new _webpack2['default'].optimize.UglifyJsPlugin({
129 | // keep_fnames prevents function name mangling.
130 | // Function names are useful. Seeing a readable error stack while
131 | // being able to programmatically analyse it is priceless. And yes,
132 | // we don't need infamous FLUX_ACTION_CONSTANTS with function name.
133 | // It's ES6 standard polyfilled by Babel.
134 | /* eslint-disable camelcase */
135 | compress: {
136 | keep_fnames: true,
137 | screw_ie8: true,
138 | warnings: false // Because uglify reports irrelevant warnings.
139 | },
140 | mangle: {
141 | keep_fnames: true
142 | }
143 | /* eslint-enable camelcase */
144 | }));
145 | }
146 | return plugins;
147 | })(),
148 | resolve: {
149 | extensions: ['', '.js', '.jsx'],
150 | modulesDirectories: ['node_modules', 'web_modules'],
151 | alias: config.alias
152 | }
153 | };
154 | };
155 |
156 | module.exports = exports['default'];
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Component Tools
2 |
3 | [![NPM version][npm-badge]][npm] [![Build Status][travis-ci-image]][travis-ci-url] [![CircleCI Status][circleci-badge]][circleci]
4 |
5 | [![Dependency Status][deps-badge]][deps]
6 | [![devDependency Status][dev-deps-badge]][dev-deps]
7 | [![peerDependency Status][peer-deps-badge]][peer-deps]
8 |
9 | > Common Gulp tasks I use across my React Component projects. Base on [react-component-gulp-tasks][react-component-gulp-tasks]
10 |
11 | This package provides common gulp tasks for building react components with:
12 |
13 | * [Webpack][Webpack] for transforming ES2015+/JSX and creating distribution builds
14 | * Hot reload for automatic, efficient rebundling on file changes
15 | * Connect for serving examples during development, with live-reload integration
16 | * SASS/LESS/PostCSS/stylus... stylesheets for examples
17 | * Publishing examples to Github Pages
18 | * Publishing packages to npm and bower
19 |
20 | You control the settings for the tasks by providing a `config` object, as described below.
21 |
22 |
23 | ## Project setup
24 |
25 | The tasks assume you are following the following conventions for your project:
26 |
27 | * Package source has a single entry point in a source folder
28 | * The package will be published to both npm and bower
29 | * A transpiled version will be published to a lib folder (for Node.js, Browserify and Webpack)
30 | * A standalone package will be published to a dist folder (for Bower)
31 | * Examples consist of
32 | * Static file(s) (e.g. html, images, etc)
33 | * One or more stylesheets to be generated with SASS/LESS/PostCSS/stylus...
34 | * One or more scripts to be bundled with Webpack
35 | * Examples will be packaged into an examples dist folder, and published to github pages
36 |
37 | ### Example project structure
38 |
39 | ```
40 | bower.json
41 | package.json
42 | gulpfile.js
43 | src
44 | MyComponent.js
45 | sass // or less
46 | my-component.scss
47 | lib
48 | // contains transpiled source
49 | MyComponent.js
50 | dist
51 | // contains packaged component
52 | my-component.js
53 | my-component.min.js
54 | my-component.css
55 | my-component.min.css
56 | example
57 | dist
58 | // contains built examples
59 | src
60 | app.js
61 | app.scss
62 | index.html
63 | ```
64 |
65 | For a complete example see [react-component-starter](https://github.com/luqin/react-component-tools/tree/master/examples)
66 |
67 | ## Usage
68 |
69 | ```
70 | npm install --save-dev gulp react-component-tools
71 | ```
72 |
73 | 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.
74 |
75 | ```js
76 | var gulp = require('gulp');
77 | var initGulpTasks = require('react-component-tools');
78 | var taskConfig = require('./config');
79 |
80 | initGulpTasks(gulp, taskConfig);
81 | ```
82 |
83 | ### Task Config
84 |
85 | You can customise the tasks to match your project structure by changing the config.
86 |
87 | Required config keys are:
88 |
89 | **`Component`**
90 |
91 | * `component.entry` - the path of source (entry) file for the component
92 | * `component.name` - controls the standalone module name
93 | * `component.dist` - the directory to build the distribution to
94 | * `component.pkgName` - the name of the package that will be exported by the component (**must match the name of your package on npm**)
95 | * `component.dependencies{}` - webpack externals, array of common dependencies that will be excluded from the build
96 | * `component.less` - the entrypoint for the component stylesheet, if you're using less to provide one
97 | * `component.sass` - the entrypoint for the component stylesheet, if you're using sass to provide one
98 |
99 | **`Example`**
100 |
101 | * `example.src` - the directory to load the source files from
102 | * `example.dist` - the directory to build the distribution to
103 | * `example.entry{}` - scripts will be transpiled with babel and bundled by webpack
104 | * `example.files[]` - files will be copied as-is into the `example.dist` folder
105 | * `example.port` - port to serve examples on, defaults to `8888`
106 |
107 | **`Alias`**
108 |
109 | * `alias{}` - webpack alias
110 |
111 | ## Example
112 |
113 | ```js
114 | var gulp = require('gulp');
115 | var initGulpTasks = require('react-component-tools');
116 |
117 | var taskConfig = {
118 |
119 | component: {
120 | name: 'MyComponent',
121 | dependencies: {
122 | classnames: 'classnames',
123 | react: {
124 | root: 'React',
125 | commonjs2: 'react',
126 | commonjs: 'react',
127 | amd: 'react'
128 | }
129 | },
130 | sass: './scss/my-component.scss' // or `less: 'less/my-component.less'`
131 | },
132 |
133 | example: {
134 | dist: './examples/dist',
135 | entry: './examples/src/app.js',
136 | html: './examples/src/index.html',
137 | files: [
138 | './README.md'
139 | ]
140 | }
141 |
142 | };
143 |
144 | initGulpTasks(gulp, taskConfig);
145 |
146 | ```
147 |
148 | ### Gulp Tasks
149 |
150 | * dev
151 | * `gulp dev`
152 | * `gulp dev:openBrowser`
153 | * lib
154 | * `gulp clean:lib`
155 | * `gulp build:lib`
156 | * `gulp watch:lib`
157 | * dist
158 | * `gulp clean:dist`
159 | * `gulp build:dist`
160 | * examples
161 | * `gulp clean:examples`
162 | * `gulp build:examples`
163 | * `gulp watch:examples`
164 | * build
165 | * `gulp build`
166 | * bump
167 | * `gulp bump`
168 | * `gulp bump:minor`
169 | * `gulp bump:major`
170 | * release
171 | * `gulp publish:tag`
172 | * `gulp publish:npm`
173 | * `gulp publish:cnpm`
174 | * `gulp publish:examples` publish to gh-pages
175 | * `gulp release`
176 |
177 | ## Contributing
178 |
179 | I wrote this package because maintaining my build process across multiple packages became a repetitive chore with large margin for error.
180 |
181 | 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.
182 |
183 | 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.
184 |
185 |
186 | [npm-badge]: http://badge.fury.io/js/react-component-tools.svg
187 | [npm]: https://www.npmjs.com/package/react-component-tools
188 |
189 | [deps-badge]: https://david-dm.org/luqin/react-component-tools.svg
190 | [deps]: https://david-dm.org/luqin/react-component-tools
191 |
192 | [dev-deps-badge]: https://david-dm.org/luqin/react-component-tools/dev-status.svg
193 | [dev-deps]: https://david-dm.org/luqin/react-component-tools#info=devDependencies
194 |
195 | [peer-deps-badge]: https://david-dm.org/luqin/react-component-tools/peer-status.svg
196 | [peer-deps]: https://david-dm.org/luqin/react-component-tools#info=peerDependencies
197 |
198 | [travis-ci-image]: https://travis-ci.org/luqin/react-component-tools.svg
199 | [travis-ci-url]: https://travis-ci.org/luqin/react-component-tools
200 |
201 | [circleci]: https://circleci.com/gh/luqin/react-component-tools
202 | [circleci-badge]: https://img.shields.io/circleci/project/luqin/react-component-tools/master.svg?style=flat&label=circle
203 |
204 | [react-component-gulp-tasks]: https://github.com/JedWatson/react-component-gulp-tasks
205 |
206 | [Webpack]: https://github.com/webpack/webpack
207 |
--------------------------------------------------------------------------------
/examples/dist/react-component.js:
--------------------------------------------------------------------------------
1 | (function webpackUniversalModuleDefinition(root, factory) {
2 | if(typeof exports === 'object' && typeof module === 'object')
3 | module.exports = factory(require("react"));
4 | else if(typeof define === 'function' && define.amd)
5 | define(["react"], factory);
6 | else if(typeof exports === 'object')
7 | exports["ReactComponent"] = factory(require("react"));
8 | else
9 | root["ReactComponent"] = factory(root["React"]);
10 | })(this, function(__WEBPACK_EXTERNAL_MODULE_31__) {
11 | return /******/ (function(modules) { // webpackBootstrap
12 | /******/ // The module cache
13 | /******/ var installedModules = {};
14 | /******/
15 | /******/ // The require function
16 | /******/ function __webpack_require__(moduleId) {
17 | /******/
18 | /******/ // Check if module is in cache
19 | /******/ if(installedModules[moduleId])
20 | /******/ return installedModules[moduleId].exports;
21 | /******/
22 | /******/ // Create a new module (and put it into the cache)
23 | /******/ var module = installedModules[moduleId] = {
24 | /******/ exports: {},
25 | /******/ id: moduleId,
26 | /******/ loaded: false
27 | /******/ };
28 | /******/
29 | /******/ // Execute the module function
30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
31 | /******/
32 | /******/ // Flag the module as loaded
33 | /******/ module.loaded = true;
34 | /******/
35 | /******/ // Return the exports of the module
36 | /******/ return module.exports;
37 | /******/ }
38 | /******/
39 | /******/
40 | /******/ // expose the modules object (__webpack_modules__)
41 | /******/ __webpack_require__.m = modules;
42 | /******/
43 | /******/ // expose the module cache
44 | /******/ __webpack_require__.c = installedModules;
45 | /******/
46 | /******/ // __webpack_public_path__
47 | /******/ __webpack_require__.p = "";
48 | /******/
49 | /******/ // Load entry module and return exports
50 | /******/ return __webpack_require__(0);
51 | /******/ })
52 | /************************************************************************/
53 | /******/ ([
54 | /* 0 */
55 | /***/ function(module, exports, __webpack_require__) {
56 |
57 | 'use strict';
58 |
59 | var _get = __webpack_require__(1)['default'];
60 |
61 | var _inherits = __webpack_require__(17)['default'];
62 |
63 | var _createClass = __webpack_require__(26)['default'];
64 |
65 | var _classCallCheck = __webpack_require__(29)['default'];
66 |
67 | var _interopRequireDefault = __webpack_require__(30)['default'];
68 |
69 | Object.defineProperty(exports, '__esModule', {
70 | value: true
71 | });
72 |
73 | var _react = __webpack_require__(31);
74 |
75 | var _react2 = _interopRequireDefault(_react);
76 |
77 | var ReactComponent = (function (_React$Component) {
78 | _inherits(ReactComponent, _React$Component);
79 |
80 | function ReactComponent() {
81 | _classCallCheck(this, ReactComponent);
82 |
83 | _get(Object.getPrototypeOf(ReactComponent.prototype), 'constructor', this).apply(this, arguments);
84 | }
85 |
86 | _createClass(ReactComponent, [{
87 | key: 'render',
88 | value: function render() {
89 | return _react2['default'].createElement(
90 | 'div',
91 | null,
92 | 'ReactComponent'
93 | );
94 | }
95 | }]);
96 |
97 | return ReactComponent;
98 | })(_react2['default'].Component);
99 |
100 | exports['default'] = ReactComponent;
101 | module.exports = exports['default'];
102 |
103 | /***/ },
104 | /* 1 */
105 | /***/ function(module, exports, __webpack_require__) {
106 |
107 | "use strict";
108 |
109 | var _Object$getOwnPropertyDescriptor = __webpack_require__(2)["default"];
110 |
111 | exports["default"] = function get(_x, _x2, _x3) {
112 | var _again = true;
113 |
114 | _function: while (_again) {
115 | var object = _x,
116 | property = _x2,
117 | receiver = _x3;
118 | _again = false;
119 | if (object === null) object = Function.prototype;
120 |
121 | var desc = _Object$getOwnPropertyDescriptor(object, property);
122 |
123 | if (desc === undefined) {
124 | var parent = Object.getPrototypeOf(object);
125 |
126 | if (parent === null) {
127 | return undefined;
128 | } else {
129 | _x = parent;
130 | _x2 = property;
131 | _x3 = receiver;
132 | _again = true;
133 | desc = parent = undefined;
134 | continue _function;
135 | }
136 | } else if ("value" in desc) {
137 | return desc.value;
138 | } else {
139 | var getter = desc.get;
140 |
141 | if (getter === undefined) {
142 | return undefined;
143 | }
144 |
145 | return getter.call(receiver);
146 | }
147 | }
148 | };
149 |
150 | exports.__esModule = true;
151 |
152 | /***/ },
153 | /* 2 */
154 | /***/ function(module, exports, __webpack_require__) {
155 |
156 | module.exports = { "default": __webpack_require__(3), __esModule: true };
157 |
158 | /***/ },
159 | /* 3 */
160 | /***/ function(module, exports, __webpack_require__) {
161 |
162 | var $ = __webpack_require__(4);
163 | __webpack_require__(5);
164 | module.exports = function getOwnPropertyDescriptor(it, key){
165 | return $.getDesc(it, key);
166 | };
167 |
168 | /***/ },
169 | /* 4 */
170 | /***/ function(module, exports) {
171 |
172 | var $Object = Object;
173 | module.exports = {
174 | create: $Object.create,
175 | getProto: $Object.getPrototypeOf,
176 | isEnum: {}.propertyIsEnumerable,
177 | getDesc: $Object.getOwnPropertyDescriptor,
178 | setDesc: $Object.defineProperty,
179 | setDescs: $Object.defineProperties,
180 | getKeys: $Object.keys,
181 | getNames: $Object.getOwnPropertyNames,
182 | getSymbols: $Object.getOwnPropertySymbols,
183 | each: [].forEach
184 | };
185 |
186 | /***/ },
187 | /* 5 */
188 | /***/ function(module, exports, __webpack_require__) {
189 |
190 | // 19.1.2.6 Object.getOwnPropertyDescriptor(O, P)
191 | var toIObject = __webpack_require__(6);
192 |
193 | __webpack_require__(10)('getOwnPropertyDescriptor', function($getOwnPropertyDescriptor){
194 | return function getOwnPropertyDescriptor(it, key){
195 | return $getOwnPropertyDescriptor(toIObject(it), key);
196 | };
197 | });
198 |
199 | /***/ },
200 | /* 6 */
201 | /***/ function(module, exports, __webpack_require__) {
202 |
203 | // to indexed object, toObject with fallback for non-array-like ES3 strings
204 | var IObject = __webpack_require__(7)
205 | , defined = __webpack_require__(9);
206 | module.exports = function(it){
207 | return IObject(defined(it));
208 | };
209 |
210 | /***/ },
211 | /* 7 */
212 | /***/ function(module, exports, __webpack_require__) {
213 |
214 | // fallback for non-array-like ES3 and non-enumerable old V8 strings
215 | var cof = __webpack_require__(8);
216 | module.exports = Object('z').propertyIsEnumerable(0) ? Object : function(it){
217 | return cof(it) == 'String' ? it.split('') : Object(it);
218 | };
219 |
220 | /***/ },
221 | /* 8 */
222 | /***/ function(module, exports) {
223 |
224 | var toString = {}.toString;
225 |
226 | module.exports = function(it){
227 | return toString.call(it).slice(8, -1);
228 | };
229 |
230 | /***/ },
231 | /* 9 */
232 | /***/ function(module, exports) {
233 |
234 | // 7.2.1 RequireObjectCoercible(argument)
235 | module.exports = function(it){
236 | if(it == undefined)throw TypeError("Can't call method on " + it);
237 | return it;
238 | };
239 |
240 | /***/ },
241 | /* 10 */
242 | /***/ function(module, exports, __webpack_require__) {
243 |
244 | // most Object methods by ES6 should accept primitives
245 | var $export = __webpack_require__(11)
246 | , core = __webpack_require__(13)
247 | , fails = __webpack_require__(16);
248 | module.exports = function(KEY, exec){
249 | var fn = (core.Object || {})[KEY] || Object[KEY]
250 | , exp = {};
251 | exp[KEY] = exec(fn);
252 | $export($export.S + $export.F * fails(function(){ fn(1); }), 'Object', exp);
253 | };
254 |
255 | /***/ },
256 | /* 11 */
257 | /***/ function(module, exports, __webpack_require__) {
258 |
259 | var global = __webpack_require__(12)
260 | , core = __webpack_require__(13)
261 | , ctx = __webpack_require__(14)
262 | , PROTOTYPE = 'prototype';
263 |
264 | var $export = function(type, name, source){
265 | var IS_FORCED = type & $export.F
266 | , IS_GLOBAL = type & $export.G
267 | , IS_STATIC = type & $export.S
268 | , IS_PROTO = type & $export.P
269 | , IS_BIND = type & $export.B
270 | , IS_WRAP = type & $export.W
271 | , exports = IS_GLOBAL ? core : core[name] || (core[name] = {})
272 | , target = IS_GLOBAL ? global : IS_STATIC ? global[name] : (global[name] || {})[PROTOTYPE]
273 | , key, own, out;
274 | if(IS_GLOBAL)source = name;
275 | for(key in source){
276 | // contains in native
277 | own = !IS_FORCED && target && key in target;
278 | if(own && key in exports)continue;
279 | // export native or passed
280 | out = own ? target[key] : source[key];
281 | // prevent global pollution for namespaces
282 | exports[key] = IS_GLOBAL && typeof target[key] != 'function' ? source[key]
283 | // bind timers to global for call from export context
284 | : IS_BIND && own ? ctx(out, global)
285 | // wrap global constructors for prevent change them in library
286 | : IS_WRAP && target[key] == out ? (function(C){
287 | var F = function(param){
288 | return this instanceof C ? new C(param) : C(param);
289 | };
290 | F[PROTOTYPE] = C[PROTOTYPE];
291 | return F;
292 | // make static versions for prototype methods
293 | })(out) : IS_PROTO && typeof out == 'function' ? ctx(Function.call, out) : out;
294 | if(IS_PROTO)(exports[PROTOTYPE] || (exports[PROTOTYPE] = {}))[key] = out;
295 | }
296 | };
297 | // type bitmap
298 | $export.F = 1; // forced
299 | $export.G = 2; // global
300 | $export.S = 4; // static
301 | $export.P = 8; // proto
302 | $export.B = 16; // bind
303 | $export.W = 32; // wrap
304 | module.exports = $export;
305 |
306 | /***/ },
307 | /* 12 */
308 | /***/ function(module, exports) {
309 |
310 | // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
311 | var global = module.exports = typeof window != 'undefined' && window.Math == Math
312 | ? window : typeof self != 'undefined' && self.Math == Math ? self : Function('return this')();
313 | if(typeof __g == 'number')__g = global; // eslint-disable-line no-undef
314 |
315 | /***/ },
316 | /* 13 */
317 | /***/ function(module, exports) {
318 |
319 | var core = module.exports = {version: '1.2.6'};
320 | if(typeof __e == 'number')__e = core; // eslint-disable-line no-undef
321 |
322 | /***/ },
323 | /* 14 */
324 | /***/ function(module, exports, __webpack_require__) {
325 |
326 | // optional / simple context binding
327 | var aFunction = __webpack_require__(15);
328 | module.exports = function(fn, that, length){
329 | aFunction(fn);
330 | if(that === undefined)return fn;
331 | switch(length){
332 | case 1: return function(a){
333 | return fn.call(that, a);
334 | };
335 | case 2: return function(a, b){
336 | return fn.call(that, a, b);
337 | };
338 | case 3: return function(a, b, c){
339 | return fn.call(that, a, b, c);
340 | };
341 | }
342 | return function(/* ...args */){
343 | return fn.apply(that, arguments);
344 | };
345 | };
346 |
347 | /***/ },
348 | /* 15 */
349 | /***/ function(module, exports) {
350 |
351 | module.exports = function(it){
352 | if(typeof it != 'function')throw TypeError(it + ' is not a function!');
353 | return it;
354 | };
355 |
356 | /***/ },
357 | /* 16 */
358 | /***/ function(module, exports) {
359 |
360 | module.exports = function(exec){
361 | try {
362 | return !!exec();
363 | } catch(e){
364 | return true;
365 | }
366 | };
367 |
368 | /***/ },
369 | /* 17 */
370 | /***/ function(module, exports, __webpack_require__) {
371 |
372 | "use strict";
373 |
374 | var _Object$create = __webpack_require__(18)["default"];
375 |
376 | var _Object$setPrototypeOf = __webpack_require__(20)["default"];
377 |
378 | exports["default"] = function (subClass, superClass) {
379 | if (typeof superClass !== "function" && superClass !== null) {
380 | throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
381 | }
382 |
383 | subClass.prototype = _Object$create(superClass && superClass.prototype, {
384 | constructor: {
385 | value: subClass,
386 | enumerable: false,
387 | writable: true,
388 | configurable: true
389 | }
390 | });
391 | if (superClass) _Object$setPrototypeOf ? _Object$setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
392 | };
393 |
394 | exports.__esModule = true;
395 |
396 | /***/ },
397 | /* 18 */
398 | /***/ function(module, exports, __webpack_require__) {
399 |
400 | module.exports = { "default": __webpack_require__(19), __esModule: true };
401 |
402 | /***/ },
403 | /* 19 */
404 | /***/ function(module, exports, __webpack_require__) {
405 |
406 | var $ = __webpack_require__(4);
407 | module.exports = function create(P, D){
408 | return $.create(P, D);
409 | };
410 |
411 | /***/ },
412 | /* 20 */
413 | /***/ function(module, exports, __webpack_require__) {
414 |
415 | module.exports = { "default": __webpack_require__(21), __esModule: true };
416 |
417 | /***/ },
418 | /* 21 */
419 | /***/ function(module, exports, __webpack_require__) {
420 |
421 | __webpack_require__(22);
422 | module.exports = __webpack_require__(13).Object.setPrototypeOf;
423 |
424 | /***/ },
425 | /* 22 */
426 | /***/ function(module, exports, __webpack_require__) {
427 |
428 | // 19.1.3.19 Object.setPrototypeOf(O, proto)
429 | var $export = __webpack_require__(11);
430 | $export($export.S, 'Object', {setPrototypeOf: __webpack_require__(23).set});
431 |
432 | /***/ },
433 | /* 23 */
434 | /***/ function(module, exports, __webpack_require__) {
435 |
436 | // Works with __proto__ only. Old v8 can't work with null proto objects.
437 | /* eslint-disable no-proto */
438 | var getDesc = __webpack_require__(4).getDesc
439 | , isObject = __webpack_require__(24)
440 | , anObject = __webpack_require__(25);
441 | var check = function(O, proto){
442 | anObject(O);
443 | if(!isObject(proto) && proto !== null)throw TypeError(proto + ": can't set as prototype!");
444 | };
445 | module.exports = {
446 | set: Object.setPrototypeOf || ('__proto__' in {} ? // eslint-disable-line
447 | function(test, buggy, set){
448 | try {
449 | set = __webpack_require__(14)(Function.call, getDesc(Object.prototype, '__proto__').set, 2);
450 | set(test, []);
451 | buggy = !(test instanceof Array);
452 | } catch(e){ buggy = true; }
453 | return function setPrototypeOf(O, proto){
454 | check(O, proto);
455 | if(buggy)O.__proto__ = proto;
456 | else set(O, proto);
457 | return O;
458 | };
459 | }({}, false) : undefined),
460 | check: check
461 | };
462 |
463 | /***/ },
464 | /* 24 */
465 | /***/ function(module, exports) {
466 |
467 | module.exports = function(it){
468 | return typeof it === 'object' ? it !== null : typeof it === 'function';
469 | };
470 |
471 | /***/ },
472 | /* 25 */
473 | /***/ function(module, exports, __webpack_require__) {
474 |
475 | var isObject = __webpack_require__(24);
476 | module.exports = function(it){
477 | if(!isObject(it))throw TypeError(it + ' is not an object!');
478 | return it;
479 | };
480 |
481 | /***/ },
482 | /* 26 */
483 | /***/ function(module, exports, __webpack_require__) {
484 |
485 | "use strict";
486 |
487 | var _Object$defineProperty = __webpack_require__(27)["default"];
488 |
489 | exports["default"] = (function () {
490 | function defineProperties(target, props) {
491 | for (var i = 0; i < props.length; i++) {
492 | var descriptor = props[i];
493 | descriptor.enumerable = descriptor.enumerable || false;
494 | descriptor.configurable = true;
495 | if ("value" in descriptor) descriptor.writable = true;
496 |
497 | _Object$defineProperty(target, descriptor.key, descriptor);
498 | }
499 | }
500 |
501 | return function (Constructor, protoProps, staticProps) {
502 | if (protoProps) defineProperties(Constructor.prototype, protoProps);
503 | if (staticProps) defineProperties(Constructor, staticProps);
504 | return Constructor;
505 | };
506 | })();
507 |
508 | exports.__esModule = true;
509 |
510 | /***/ },
511 | /* 27 */
512 | /***/ function(module, exports, __webpack_require__) {
513 |
514 | module.exports = { "default": __webpack_require__(28), __esModule: true };
515 |
516 | /***/ },
517 | /* 28 */
518 | /***/ function(module, exports, __webpack_require__) {
519 |
520 | var $ = __webpack_require__(4);
521 | module.exports = function defineProperty(it, key, desc){
522 | return $.setDesc(it, key, desc);
523 | };
524 |
525 | /***/ },
526 | /* 29 */
527 | /***/ function(module, exports) {
528 |
529 | "use strict";
530 |
531 | exports["default"] = function (instance, Constructor) {
532 | if (!(instance instanceof Constructor)) {
533 | throw new TypeError("Cannot call a class as a function");
534 | }
535 | };
536 |
537 | exports.__esModule = true;
538 |
539 | /***/ },
540 | /* 30 */
541 | /***/ function(module, exports) {
542 |
543 | "use strict";
544 |
545 | exports["default"] = function (obj) {
546 | return obj && obj.__esModule ? obj : {
547 | "default": obj
548 | };
549 | };
550 |
551 | exports.__esModule = true;
552 |
553 | /***/ },
554 | /* 31 */
555 | /***/ function(module, exports) {
556 |
557 | module.exports = __WEBPACK_EXTERNAL_MODULE_31__;
558 |
559 | /***/ }
560 | /******/ ])
561 | });
562 | ;
563 | //# sourceMappingURL=react-component.js.map
--------------------------------------------------------------------------------
/examples/dist/react-component.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///webpack/bootstrap 6019c27188c9bdf4fe5f","webpack:///E:/Workspace/github2/react-pack/test/src/index.js","webpack:///./~/babel-runtime/helpers/get.js","webpack:///./~/babel-runtime/core-js/object/get-own-property-descriptor.js","webpack:///./~/core-js/library/fn/object/get-own-property-descriptor.js","webpack:///./~/core-js/library/modules/$.js","webpack:///./~/core-js/library/modules/es6.object.get-own-property-descriptor.js","webpack:///./~/core-js/library/modules/$.to-iobject.js","webpack:///./~/core-js/library/modules/$.iobject.js","webpack:///./~/core-js/library/modules/$.cof.js","webpack:///./~/core-js/library/modules/$.defined.js","webpack:///./~/core-js/library/modules/$.object-sap.js","webpack:///./~/core-js/library/modules/$.export.js","webpack:///./~/core-js/library/modules/$.global.js","webpack:///./~/core-js/library/modules/$.core.js","webpack:///./~/core-js/library/modules/$.ctx.js","webpack:///./~/core-js/library/modules/$.a-function.js","webpack:///./~/core-js/library/modules/$.fails.js","webpack:///./~/babel-runtime/helpers/inherits.js","webpack:///./~/babel-runtime/core-js/object/create.js","webpack:///./~/core-js/library/fn/object/create.js","webpack:///./~/babel-runtime/core-js/object/set-prototype-of.js","webpack:///./~/core-js/library/fn/object/set-prototype-of.js","webpack:///./~/core-js/library/modules/es6.object.set-prototype-of.js","webpack:///./~/core-js/library/modules/$.set-proto.js","webpack:///./~/core-js/library/modules/$.is-object.js","webpack:///./~/core-js/library/modules/$.an-object.js","webpack:///./~/babel-runtime/helpers/create-class.js","webpack:///./~/babel-runtime/core-js/object/define-property.js","webpack:///./~/core-js/library/fn/object/define-property.js","webpack:///./~/babel-runtime/helpers/class-call-check.js","webpack:///./~/babel-runtime/helpers/interop-require-default.js","webpack:///external {\"root\":\"React\",\"commonjs2\":\"react\",\"commonjs\":\"react\",\"amd\":\"react\"}"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,O;ACVA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;;;;;;;;;;;;;;;;;;;;;;kCCtCkB,EAAO;;;;KAEnB,cAAc;eAAd,cAAc;;cAAd,cAAc;+BAAd,cAAc;;oCAAd,cAAc;;;kBAAd,cAAc;;gBAEV,kBAAG;AACL,oBACI;;;;cAEM,CACR;UACL;;;YARC,cAAc;IAAS,mBAAM,SAAS;;sBAY7B,cAAc;;;;;;;ACd7B;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA,QAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAK;AACL;AACA,MAAK;AACL;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA,2B;;;;;;AC3CA,mBAAkB,uD;;;;;;ACAlB;AACA;AACA;AACA;AACA,G;;;;;;ACJA;AACA;AACA;AACA;AACA,iBAAgB;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,G;;;;;;ACZA;AACA;;AAEA;AACA;AACA;AACA;AACA,EAAC,E;;;;;;ACPD;AACA;AACA;AACA;AACA;AACA,G;;;;;;ACLA;AACA;AACA;AACA;AACA,G;;;;;;ACJA,kBAAiB;;AAEjB;AACA;AACA,G;;;;;;ACJA;AACA;AACA;AACA;AACA,G;;;;;;ACJA;AACA;AACA;AACA;AACA;AACA,+BAA8B;AAC9B;AACA;AACA,oDAAmD,OAAO,EAAE;AAC5D,G;;;;;;ACTA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oEAAmE;AACnE,sFAAqF;AACrF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAK;AACL,gEAA+D;AAC/D;AACA;AACA;AACA,eAAc;AACd,eAAc;AACd,eAAc;AACd,eAAc;AACd,gBAAe;AACf,gBAAe;AACf,0B;;;;;;AC7CA;AACA;AACA;AACA,wCAAuC,gC;;;;;;ACHvC,8BAA6B;AAC7B,sCAAqC,gC;;;;;;ACDrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,G;;;;;;ACnBA;AACA;AACA;AACA,G;;;;;;ACHA;AACA;AACA;AACA,IAAG;AACH;AACA;AACA,G;;;;;;ACNA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAG;AACH;AACA;;AAEA,2B;;;;;;ACtBA,mBAAkB,wD;;;;;;ACAlB;AACA;AACA;AACA,G;;;;;;ACHA,mBAAkB,wD;;;;;;ACAlB;AACA,gE;;;;;;ACDA;AACA;AACA,+BAA8B,4CAA6C,E;;;;;;ACF3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mDAAkD;AAClD;AACA;AACA;AACA;AACA;AACA,QAAO,UAAU,cAAc;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA,MAAK,GAAG;AACR;AACA,G;;;;;;ACzBA;AACA;AACA,G;;;;;;ACFA;AACA;AACA;AACA;AACA,G;;;;;;ACJA;;AAEA;;AAEA;AACA;AACA,oBAAmB,kBAAkB;AACrC;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,EAAC;;AAED,2B;;;;;;ACvBA,mBAAkB,wD;;;;;;ACAlB;AACA;AACA;AACA,G;;;;;;ACHA;;AAEA;AACA;AACA;AACA;AACA;;AAEA,2B;;;;;;ACRA;;AAEA;AACA;AACA;AACA;AACA;;AAEA,2B;;;;;;ACRA,iD","file":"react-component.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"ReactComponent\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"ReactComponent\"] = factory(root[\"React\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_31__) {\nreturn \n\n\n/** WEBPACK FOOTER **\n ** webpack/universalModuleDefinition\n **/"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 6019c27188c9bdf4fe5f\n **/","import React from 'react';\n\nclass ReactComponent extends React.Component {\n\n render() {\n return (\n \n ReactComponent\n
\n );\n }\n\n}\n\nexport default ReactComponent;\n\n\n\n/** WEBPACK FOOTER **\n ** E:/Workspace/github2/react-pack/test/src/index.js\n **/","\"use strict\";\n\nvar _Object$getOwnPropertyDescriptor = require(\"babel-runtime/core-js/object/get-own-property-descriptor\")[\"default\"];\n\nexports[\"default\"] = function get(_x, _x2, _x3) {\n var _again = true;\n\n _function: while (_again) {\n var object = _x,\n property = _x2,\n receiver = _x3;\n _again = false;\n if (object === null) object = Function.prototype;\n\n var desc = _Object$getOwnPropertyDescriptor(object, property);\n\n if (desc === undefined) {\n var parent = Object.getPrototypeOf(object);\n\n if (parent === null) {\n return undefined;\n } else {\n _x = parent;\n _x2 = property;\n _x3 = receiver;\n _again = true;\n desc = parent = undefined;\n continue _function;\n }\n } else if (\"value\" in desc) {\n return desc.value;\n } else {\n var getter = desc.get;\n\n if (getter === undefined) {\n return undefined;\n }\n\n return getter.call(receiver);\n }\n }\n};\n\nexports.__esModule = true;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/helpers/get.js\n ** module id = 1\n ** module chunks = 0\n **/","module.exports = { \"default\": require(\"core-js/library/fn/object/get-own-property-descriptor\"), __esModule: true };\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/core-js/object/get-own-property-descriptor.js\n ** module id = 2\n ** module chunks = 0\n **/","var $ = require('../../modules/$');\nrequire('../../modules/es6.object.get-own-property-descriptor');\nmodule.exports = function getOwnPropertyDescriptor(it, key){\n return $.getDesc(it, key);\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/fn/object/get-own-property-descriptor.js\n ** module id = 3\n ** module chunks = 0\n **/","var $Object = Object;\nmodule.exports = {\n create: $Object.create,\n getProto: $Object.getPrototypeOf,\n isEnum: {}.propertyIsEnumerable,\n getDesc: $Object.getOwnPropertyDescriptor,\n setDesc: $Object.defineProperty,\n setDescs: $Object.defineProperties,\n getKeys: $Object.keys,\n getNames: $Object.getOwnPropertyNames,\n getSymbols: $Object.getOwnPropertySymbols,\n each: [].forEach\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.js\n ** module id = 4\n ** module chunks = 0\n **/","// 19.1.2.6 Object.getOwnPropertyDescriptor(O, P)\nvar toIObject = require('./$.to-iobject');\n\nrequire('./$.object-sap')('getOwnPropertyDescriptor', function($getOwnPropertyDescriptor){\n return function getOwnPropertyDescriptor(it, key){\n return $getOwnPropertyDescriptor(toIObject(it), key);\n };\n});\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/es6.object.get-own-property-descriptor.js\n ** module id = 5\n ** module chunks = 0\n **/","// to indexed object, toObject with fallback for non-array-like ES3 strings\nvar IObject = require('./$.iobject')\n , defined = require('./$.defined');\nmodule.exports = function(it){\n return IObject(defined(it));\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.to-iobject.js\n ** module id = 6\n ** module chunks = 0\n **/","// fallback for non-array-like ES3 and non-enumerable old V8 strings\nvar cof = require('./$.cof');\nmodule.exports = Object('z').propertyIsEnumerable(0) ? Object : function(it){\n return cof(it) == 'String' ? it.split('') : Object(it);\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.iobject.js\n ** module id = 7\n ** module chunks = 0\n **/","var toString = {}.toString;\n\nmodule.exports = function(it){\n return toString.call(it).slice(8, -1);\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.cof.js\n ** module id = 8\n ** module chunks = 0\n **/","// 7.2.1 RequireObjectCoercible(argument)\nmodule.exports = function(it){\n if(it == undefined)throw TypeError(\"Can't call method on \" + it);\n return it;\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.defined.js\n ** module id = 9\n ** module chunks = 0\n **/","// most Object methods by ES6 should accept primitives\nvar $export = require('./$.export')\n , core = require('./$.core')\n , fails = require('./$.fails');\nmodule.exports = function(KEY, exec){\n var fn = (core.Object || {})[KEY] || Object[KEY]\n , exp = {};\n exp[KEY] = exec(fn);\n $export($export.S + $export.F * fails(function(){ fn(1); }), 'Object', exp);\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.object-sap.js\n ** module id = 10\n ** module chunks = 0\n **/","var global = require('./$.global')\n , core = require('./$.core')\n , ctx = require('./$.ctx')\n , PROTOTYPE = 'prototype';\n\nvar $export = function(type, name, source){\n var IS_FORCED = type & $export.F\n , IS_GLOBAL = type & $export.G\n , IS_STATIC = type & $export.S\n , IS_PROTO = type & $export.P\n , IS_BIND = type & $export.B\n , IS_WRAP = type & $export.W\n , exports = IS_GLOBAL ? core : core[name] || (core[name] = {})\n , target = IS_GLOBAL ? global : IS_STATIC ? global[name] : (global[name] || {})[PROTOTYPE]\n , key, own, out;\n if(IS_GLOBAL)source = name;\n for(key in source){\n // contains in native\n own = !IS_FORCED && target && key in target;\n if(own && key in exports)continue;\n // export native or passed\n out = own ? target[key] : source[key];\n // prevent global pollution for namespaces\n exports[key] = IS_GLOBAL && typeof target[key] != 'function' ? source[key]\n // bind timers to global for call from export context\n : IS_BIND && own ? ctx(out, global)\n // wrap global constructors for prevent change them in library\n : IS_WRAP && target[key] == out ? (function(C){\n var F = function(param){\n return this instanceof C ? new C(param) : C(param);\n };\n F[PROTOTYPE] = C[PROTOTYPE];\n return F;\n // make static versions for prototype methods\n })(out) : IS_PROTO && typeof out == 'function' ? ctx(Function.call, out) : out;\n if(IS_PROTO)(exports[PROTOTYPE] || (exports[PROTOTYPE] = {}))[key] = out;\n }\n};\n// type bitmap\n$export.F = 1; // forced\n$export.G = 2; // global\n$export.S = 4; // static\n$export.P = 8; // proto\n$export.B = 16; // bind\n$export.W = 32; // wrap\nmodule.exports = $export;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.export.js\n ** module id = 11\n ** module chunks = 0\n **/","// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028\nvar global = module.exports = typeof window != 'undefined' && window.Math == Math\n ? window : typeof self != 'undefined' && self.Math == Math ? self : Function('return this')();\nif(typeof __g == 'number')__g = global; // eslint-disable-line no-undef\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.global.js\n ** module id = 12\n ** module chunks = 0\n **/","var core = module.exports = {version: '1.2.6'};\nif(typeof __e == 'number')__e = core; // eslint-disable-line no-undef\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.core.js\n ** module id = 13\n ** module chunks = 0\n **/","// optional / simple context binding\nvar aFunction = require('./$.a-function');\nmodule.exports = function(fn, that, length){\n aFunction(fn);\n if(that === undefined)return fn;\n switch(length){\n case 1: return function(a){\n return fn.call(that, a);\n };\n case 2: return function(a, b){\n return fn.call(that, a, b);\n };\n case 3: return function(a, b, c){\n return fn.call(that, a, b, c);\n };\n }\n return function(/* ...args */){\n return fn.apply(that, arguments);\n };\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.ctx.js\n ** module id = 14\n ** module chunks = 0\n **/","module.exports = function(it){\n if(typeof it != 'function')throw TypeError(it + ' is not a function!');\n return it;\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.a-function.js\n ** module id = 15\n ** module chunks = 0\n **/","module.exports = function(exec){\n try {\n return !!exec();\n } catch(e){\n return true;\n }\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.fails.js\n ** module id = 16\n ** module chunks = 0\n **/","\"use strict\";\n\nvar _Object$create = require(\"babel-runtime/core-js/object/create\")[\"default\"];\n\nvar _Object$setPrototypeOf = require(\"babel-runtime/core-js/object/set-prototype-of\")[\"default\"];\n\nexports[\"default\"] = function (subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass);\n }\n\n subClass.prototype = _Object$create(superClass && superClass.prototype, {\n constructor: {\n value: subClass,\n enumerable: false,\n writable: true,\n configurable: true\n }\n });\n if (superClass) _Object$setPrototypeOf ? _Object$setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;\n};\n\nexports.__esModule = true;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/helpers/inherits.js\n ** module id = 17\n ** module chunks = 0\n **/","module.exports = { \"default\": require(\"core-js/library/fn/object/create\"), __esModule: true };\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/core-js/object/create.js\n ** module id = 18\n ** module chunks = 0\n **/","var $ = require('../../modules/$');\nmodule.exports = function create(P, D){\n return $.create(P, D);\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/fn/object/create.js\n ** module id = 19\n ** module chunks = 0\n **/","module.exports = { \"default\": require(\"core-js/library/fn/object/set-prototype-of\"), __esModule: true };\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/core-js/object/set-prototype-of.js\n ** module id = 20\n ** module chunks = 0\n **/","require('../../modules/es6.object.set-prototype-of');\nmodule.exports = require('../../modules/$.core').Object.setPrototypeOf;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/fn/object/set-prototype-of.js\n ** module id = 21\n ** module chunks = 0\n **/","// 19.1.3.19 Object.setPrototypeOf(O, proto)\nvar $export = require('./$.export');\n$export($export.S, 'Object', {setPrototypeOf: require('./$.set-proto').set});\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/es6.object.set-prototype-of.js\n ** module id = 22\n ** module chunks = 0\n **/","// Works with __proto__ only. Old v8 can't work with null proto objects.\n/* eslint-disable no-proto */\nvar getDesc = require('./$').getDesc\n , isObject = require('./$.is-object')\n , anObject = require('./$.an-object');\nvar check = function(O, proto){\n anObject(O);\n if(!isObject(proto) && proto !== null)throw TypeError(proto + \": can't set as prototype!\");\n};\nmodule.exports = {\n set: Object.setPrototypeOf || ('__proto__' in {} ? // eslint-disable-line\n function(test, buggy, set){\n try {\n set = require('./$.ctx')(Function.call, getDesc(Object.prototype, '__proto__').set, 2);\n set(test, []);\n buggy = !(test instanceof Array);\n } catch(e){ buggy = true; }\n return function setPrototypeOf(O, proto){\n check(O, proto);\n if(buggy)O.__proto__ = proto;\n else set(O, proto);\n return O;\n };\n }({}, false) : undefined),\n check: check\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.set-proto.js\n ** module id = 23\n ** module chunks = 0\n **/","module.exports = function(it){\n return typeof it === 'object' ? it !== null : typeof it === 'function';\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.is-object.js\n ** module id = 24\n ** module chunks = 0\n **/","var isObject = require('./$.is-object');\nmodule.exports = function(it){\n if(!isObject(it))throw TypeError(it + ' is not an object!');\n return it;\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/modules/$.an-object.js\n ** module id = 25\n ** module chunks = 0\n **/","\"use strict\";\n\nvar _Object$defineProperty = require(\"babel-runtime/core-js/object/define-property\")[\"default\"];\n\nexports[\"default\"] = (function () {\n function defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n\n _Object$defineProperty(target, descriptor.key, descriptor);\n }\n }\n\n return function (Constructor, protoProps, staticProps) {\n if (protoProps) defineProperties(Constructor.prototype, protoProps);\n if (staticProps) defineProperties(Constructor, staticProps);\n return Constructor;\n };\n})();\n\nexports.__esModule = true;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/helpers/create-class.js\n ** module id = 26\n ** module chunks = 0\n **/","module.exports = { \"default\": require(\"core-js/library/fn/object/define-property\"), __esModule: true };\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/core-js/object/define-property.js\n ** module id = 27\n ** module chunks = 0\n **/","var $ = require('../../modules/$');\nmodule.exports = function defineProperty(it, key, desc){\n return $.setDesc(it, key, desc);\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/core-js/library/fn/object/define-property.js\n ** module id = 28\n ** module chunks = 0\n **/","\"use strict\";\n\nexports[\"default\"] = function (instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n};\n\nexports.__esModule = true;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/helpers/class-call-check.js\n ** module id = 29\n ** module chunks = 0\n **/","\"use strict\";\n\nexports[\"default\"] = function (obj) {\n return obj && obj.__esModule ? obj : {\n \"default\": obj\n };\n};\n\nexports.__esModule = true;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/babel-runtime/helpers/interop-require-default.js\n ** module id = 30\n ** module chunks = 0\n **/","module.exports = __WEBPACK_EXTERNAL_MODULE_31__;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external {\"root\":\"React\",\"commonjs2\":\"react\",\"commonjs\":\"react\",\"amd\":\"react\"}\n ** module id = 31\n ** module chunks = 0\n **/"],"sourceRoot":""}
--------------------------------------------------------------------------------