ruanyf / react-babel-webpack-boilerplate

a boilerplate for React-Babel-Webpack project

This repo is a boilerplate for React-Babel-Webpack project. You could use it as a base to build your own web app.

Features

• Equip with React, ES6 & Babel 6
• Lint with ESlint and Airbnb's style sheet.
• Build with Webpack（support Webpack 1 & Webpack 2）
• Support hot module replacement
• Auto Open a new browser tab when Webpack loads, and reload the page when you modified the code
• Use Commitizen to produce commit message according to AngularJS convention
• Support git hook pre-commit used to lint and test your code
• Support git hook commit-msg used to lint your commit message
• Use conventional-changelog to generate CHANGELOG.md

How to use

First, clone the repo.

$ git clone https://github.com/ruanyf/react-babel-webpack-boilerplate.git <yourAppName>
$ cd <yourAppName>

Important: master branch only supports Webpack 1. If you want to use Webpack 2, please switch to webpack2 branch which will be the default branch in the near future.

# only run the command when you want to use Webpack 2
$ git checkout webpack2

Second, delete the old .git history and initialize new history.

$ rm -rf .git
$ git init

Third, install the dependencies.

$ npm install

Then, launch the boilerplate app.

$ npm start

Now you should see a new browser window/tab opening and a title of "Hello World" in http://127.0.0.1:8080.

Last, You need update package.json and modify fields like name, version, description, keywords, author, license and so on to fit your project.

From there, you start to develop your own code in the app directory. When you finish coding, use npm run build or npm run deploy to build the static files.

Attention, when committing your code, you should use AngularJS's commit message convention. Otherwise, the repo will throw an error. If you use npm run commit instead of git commit, the command will help you to produce a formatted commit message.

License

MIT

react-babel-webpack-boilerplate's Issues

Lint is broken

eslint-config-airbnb latest version is broken with current eslint-plugin-* dev dependencies saved in package.json.

$ npm run lint

> [email protected] lint /Users/quentinroy/Workspace/react-babel-webpack-boilerplate
> eslint 'app/**/*.@(js|jsx)'

/Users/quentinroy/Workspace/react-babel-webpack-boilerplate/node_modules/eslint-config-airbnb-base/rules/imports.js:
	Configuration for rule "import/no-unresolved" is invalid:
	Value "data["0"].caseSensitive" has additional properties.

Referenced from: /Users/quentinroy/Workspace/react-babel-webpack-boilerplate/node_modules/eslint-config-airbnb-base/index.js
Referenced from: eslint-config-airbnb
Referenced from: /Users/quentinroy/Workspace/react-babel-webpack-boilerplate/.eslintrc
Error: /Users/quentinroy/Workspace/react-babel-webpack-boilerplate/node_modules/eslint-config-airbnb-base/rules/imports.js:
	Configuration for rule "import/no-unresolved" is invalid:
	Value "data["0"].caseSensitive" has additional properties.

Referenced from: /Users/quentinroy/Workspace/react-babel-webpack-boilerplate/node_modules/eslint-config-airbnb-base/index.js
Referenced from: eslint-config-airbnb
Referenced from: /Users/quentinroy/Workspace/react-babel-webpack-boilerplate/.eslintrc
    at validateRuleOptions (/Users/quentinroy/Workspace/react-babel-webpack-boilerplate/node_modules/eslint/lib/config/config-validator.js:115:15)
    at /Users/quentinroy/Workspace/react-babel-webpack-boilerplate/node_modules/eslint/lib/config/config-validator.js:162:13
    at Array.forEach (native)
    at Object.validate (/Users/quentinroy/Workspace/react-babel-webpack-boilerplate/node_modules/eslint/lib/config/config-validator.js:161:35)
    at load (/Users/quentinroy/Workspace/react-babel-webpack-boilerplate/node_modules/eslint/lib/config/config-file.js:522:19)
    at /Users/quentinroy/Workspace/react-babel-webpack-boilerplate/node_modules/eslint/lib/config/config-file.js:391:36
    at Array.reduceRight (native)
    at applyExtends (/Users/quentinroy/Workspace/react-babel-webpack-boilerplate/node_modules/eslint/lib/config/config-file.js:362:28)
    at load (/Users/quentinroy/Workspace/react-babel-webpack-boilerplate/node_modules/eslint/lib/config/config-file.js:529:22)
    at /Users/quentinroy/Workspace/react-babel-webpack-boilerplate/node_modules/eslint/lib/config/config-file.js:391:36

Running

(
  export PKG=eslint-config-airbnb;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

(from eslint-config-airbnb) updates these dependencies and solves the issue but linting won't work anymore:

$ npm run lint

> [email protected] lint /Users/quentinroy/Workspace/react-babel-webpack-boilerplate
> eslint 'app/**/*.@(js|jsx)'


/Users/quentinroy/Workspace/react-babel-webpack-boilerplate/app/main.jsx
  3:17  error  Unexpected use of file extension "jsx" for "./components/App.jsx"  import/extensions
  7:3   error  'document' is not defined                                          no-undef
  7:29  error  'document' is not defined                                          no-undef

Error 2 and 3 are easily fixed by adding "browser": true as an env in .eslintrc. However, I have not been able to fix the "jsx" extension issue even by using the appropriate import/extensions settings as specified by eslint-plugin-import except by fully disabling the rule.

报错了....

下载本以为可以运行，但是

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in ./app/main.js
Module build failed (from ./node_modules/[email protected]@babel-loader/lib/index.js):
TypeError: Cannot read property 'babel' of undefined
    at Object.module.exports (F:\react-babel-webpack-boilerplate\node_modules\[email protected]@babel-loader\lib\index.js:103:36)
 @ multi ./node_modules/[email protected]@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./app/main.js

还有,webpack的配置

module: {
    loaders: [
      {
        test: /\.css$/,
        include: path.resolve(__dirname, "app"),
        loader: "style-loader!css-loader"
      },
      {
        test: /\.js[x]?$/,
        include: path.resolve(__dirname, "app"),
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  },

不是应该这样写吗？loaders->rules,loader->use，

module: {
    rules: [
      {
        test: /\.css$/,
        include: path.resolve(__dirname, "app"),
        use: "style-loader!css-loader"
      },
      {
        test: /\.js[x]?$/,
        include: path.resolve(__dirname, "app"),
        exclude: /node_modules/,
        use: "babel-loader"
      }
    ]
  },

我本机只有修改，才可以正常运行

PR: Add support for `eslint-plugin-compat`

This eslint plugin lints against APIs that are only supported by target browsers 🎉 Would a PR for this be welcome?

Here's a demo of it in action

阮老师,多页面的应该怎么配置webpack

入口那里不太明白

您的README中写的是MIT, 但目前项目中没有license

由于打算使用您提供的这个模板, 并且在您的README中提及了它遵循MIT的license,
麻烦提供license, 便于如果在个人项目中使用时说明出处

webpack.production.config.js is missing

I don't see the file webpack.production.config.js in this repo, and npm run deploy will absolutely fail.

多页面入口文件如何配置

阮一峰，我想问下，如果我有这样的构建项目需求，我项目中可能有多个页面，有多个入口js和css文件，我想通过热加载去监听，如何配置

npm run lint同样报错

报错内容：
‘jsx)'’不是内部或外部命令，也不是可运行的程序或批处理文件。
运行环境：

• Windows 10
• npm v3.10.3
• node v6.3.0

图片加载问题

我现在 加了 "file-loader": "^0.9.0", "url-loader": "^0.5.7",这两个依赖
webpack.production.config修改如下
{ test: /.(png|jpg)$/,include: path.resolve(__dirname, 'app'), loader: 'url?limit=50000'}
后，图片加载 app.css 文件里面的图片文件名MD5了，显示ok,
jsx 里面加的图片文件名没MD5，显示没有找到图片。

Run Failed with branch webpack2

when I execute npm start with branch webpack2, it failed with below info:

> webpack-dev-server --devtool eval --progress --hot --content-base app

✖ ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. These properties are valid:
   object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unk
nownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
   -> Options affecting the normal modules (`NormalModuleFactory`).
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `webpack-dev-server --devtool eval --progress --hot --content-base app`
npm ERR! Exit status 1

debug log info below:

0 info it worked if it ends with ok
1 verbose cli [ '/opt/node-v10.15.3-linux-x64/bin/node',
1 verbose cli   '/opt/node-v10.15.3-linux-x64/bin/npm',
1 verbose cli   'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]~prestart: [email protected]
6 info lifecycle [email protected]~start: [email protected]
7 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~start: PATH: /opt/node-v10.15.3-linux-x64/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:xxxxxxx/web/node_modules/.bin:/home/user/.pyenv/plugins/pyenv-virtualenv/shims:/home/user/.pyenv/shims:/opt/node-v10.15.3-linux-x64/bin:/home/user/.pyenv/bin:/home/user/.pyenv/plugins/pyenv-virtualenv/shims:/home/user/.pyenv/shims:/home/user/.pyenv/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
9 verbose lifecycle [email protected]~start: CWD: xxxxxxx/web
10 silly lifecycle [email protected]~start: Args: [ '-c',
10 silly lifecycle   'webpack-dev-server --devtool eval --progress --hot --content-base app' ]
11 silly lifecycle [email protected]~start: Returned: code: 1  signal: null
12 info lifecycle [email protected]~start: Failed to exec start script
13 verbose stack Error: [email protected] start: `webpack-dev-server --devtool eval --progress --hot --content-base app`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/opt/node-v10.15.3-linux-x64/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:189:13)
13 verbose stack     at ChildProcess.<anonymous> (/opt/node-v10.15.3-linux-x64/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:189:13)
13 verbose stack     at maybeClose (internal/child_process.js:970:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid [email protected]
15 verbose cwd xxxxxxx/web
16 verbose Linux 4.15.0-50-generic
17 verbose argv "/opt/node-v10.15.3-linux-x64/bin/node" "/opt/node-v10.15.3-linux-x64/bin/npm" "start"
18 verbose node v10.15.3
19 verbose npm  v6.4.1
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] start: `webpack-dev-server --devtool eval --progress --hot --content-base app`
22 error Exit status 1
23 error Failed at the [email protected] start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Could you have a check with it?

A question about Server-Side Rendering.

I noticed that you webpack jsx to client side. So React renders its components in the browser. Maybe it is not a good idea in some cases(performance, high dependency on JavaScript and poor SEO).

If I put React back to server, jsx hot-reloading on server-side seems a kind of problem.

I found that react-hot-loader was deprecated, but react-transform does not support Babel6 yet. Should I continue to use Babel5?

Any ideas? Thx :)

bundle.js MD5问题。

将webpack.production.config里面的
output
修改为
filename: './bundle.[hash:8].js'
后
由于index.html文件是直接copy的
{ from: './app/index.html', to: 'index.html' },
里面的路径不能变成 hash:8 后缀的。

webpack2 报了好多错

package.json里面webpack写了latest，现在npm start就报了一堆错。
webpack2要求entry是个string/object，我自己改完这个又报了一个别的错，改完第二个报了第三个错。。。

webpack.config.js要大改了。。。

构建报错了

ERROR in ./~/css-loader!./app/components/App.css
Module build failed: ReferenceError: Promise is not defined
at LazyResult.async (/Users/liupeng/frontEnd/react-babel-webpack-boilerplate/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:157:31)
at LazyResult.then (/Users/liupeng/frontEnd/react-babel-webpack-boilerplate/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:79:21)
at processCss (/Users/liupeng/frontEnd/react-babel-webpack-boilerplate/node_modules/css-loader/lib/processCss.js:198:5)
at Object.module.exports (/Users/liupeng/frontEnd/react-babel-webpack-boilerplate/node_modules/css-loader/lib/loader.js:24:2)
@ ./app/components/App.css 4:14-77 13:2-17:4 13:2-17:4 14:20-83

这是怎么回事 @ruanyf 老师 谢谢！！

使用react-router界面显示为空

阮老师你好，在使用这个框架开发过程中发现了一点问题，想问下是不是哪里写错了。

下载框架之后使用下列命令安装了react-router

npm install react-router --save

修改/app/main.jsx文件如下：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import { Router, Route, browserHistory } from 'react-router'

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={App} />
    </Router>,
    document.body.appendChild(document.createElement('div'))
);

使用npm start命令启动后，访问http://localhost:8080/页面显示为空，没有出现预期中的Hello World，请教一下，是哪里用的有问题吗？谢谢。

node6/npm3报错

环境：
node v6.9.1
npm v3.10.9
os win7p 64位
现象：
npm start 报错

---

·
70% 1/1 build modulesevents.js:160
throw er; // Unhandled 'error' event
^

Error: listen EACCES 127.0.0.1:8080
at Object.exports._errnoException (util.js:1026:11)
at exports._exceptionWithHostPort (util.js:1049:20)
at Server._listen2 (net.js:1244:19)
at listen (net.js:1293:10)
at net.js:1403:9
at GetAddrInfoReqWrap.asyncCallback as callback
at GetAddrInfoReqWrap.onlookup as oncomplete

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "D:\nodejs\node.exe" "C:\Users\admin\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v6.9.1
npm ERR! npm v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: webpack-dev-server --devtool eval --progress --hot --content-base app
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'webpack-dev-server --devtool eval --progress --hot --content-base app'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-babel-webpack-boilerplate package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack-dev-server --devtool eval --progress --hot --content-base app
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs react-babel-webpack-boilerplate
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls react-babel-webpack-boilerplate
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! F:\something\react\react-babel-4\npm-debug.log
·

RFC: Support for flowtype

Thoughts on this?

可否对里面的某些模块的使用作下简要说明

知其然，也要知其所以然，
诸如：commitizen之类的模块为什么要用？用了有什么好处？可否作下简要说明呢。

关于按需加载的问题

老师您好，目前项目用react开发，我一直有一个疑问，webpack把所有的js打包成一个文件，那么对于大工程来说是不是又问题？

Suggestion: auto-reload when css files modified.

git clone 地址需要改下

First, you should clone the repo and install the dependencies.

$ git clone [email protected]:ruanyf/react-babel-webpack-boilerplate.git <yourAppName>
$ cd <yourAppName>
$ npm install

$ git clone https://github.com/ruanyf/react-babel-webpack-boilerplate.git <yourAppName>

怎么在babel-loader中使用sourceMap

配置了好久都不行

SyntaxError: Unexpected token(6:2)

After initial npm start

Asset      Size  Chunks             Chunk Names
./bundle.js    301 kB       0  [emitted]  main

9cf6161f0b8786c4d0d5.hot-update.json  35 bytes          [emitted]
chunk    {0} ./bundle.js (main) 222 kB [rendered]
     + 77 hidden modules

ERROR in ./app/main.jsx
Module build failed: SyntaxError: Unexpected token (6:2)

  4 |
  5 | ReactDOM.render(
> 6 |   <App />,
    |   ^
  7 |   document.body.appendChild(document.createElement('div'))
  8 | );
  9 |

 @ multi main
webpack: bundle is now VALID.

你好我想使用你的脚手架加上nw.js 我该怎么改 我运行nw .无法打开

我想写一个 react 加上 node-webkit的应用 但是没有好的 脚手架，我想写多页面的应用不是单页的。请问我应该怎么组织代码？谢谢

依赖是不是太大了点

node_modules (master|✔) du -h -d1
12K ./.bin
16M ./babel-core
23M ./babel-eslint
744K    ./babel-loader
174M    ./babel-preset-es2015
34M ./babel-preset-react
82M ./babel-preset-stage-0
25M ./eslint
84K ./eslint-config-airbnb
232K    ./eslint-plugin-react
80K ./open-browser-webpack-plugin
6.7M    ./precommit-hook
10M ./react
40K ./react-dom
14M ./webpack
6.5M    ./webpack-dev-server
389M    .

babel-preset-es2015 这个库…… tnpm安装都下载了好久。

IE 8 兼容

这个 demo 运行后在 IE8 下报错，加上 es5-shim 也不行。
怎么兼容 IE 8。

source map

i am not sure why i change to devtool to :devtool: '#inline-source-map' or devtool: 'inline-source-map',
the jsx file can not add breakdown or not debug . when i change to eval ,it can debug . since the eval can not get the exactly lines , could you help me resolve the issue .
Thanks
[email protected]

XHR issue

Hi, thanks for this, I get this in console log:

GET http://0.0.0.0:8080/socket.io/?EIO=3&transport=polling&t=1450823884019-16 Request.create @ polling-xhr.js:232Request @ polling-xhr.js:155XHR.request @ polling-xhr.js:86XHR.doPoll @ polling-xhr.js:116Polling.poll @ polling.js:118Polling.doOpen @ polling.js:62Transport.open @ transport.js:82Socket.open @ socket.js:220Socket @ socket.js:102Socket @ socket.js:37Manager.open.Manager.connect @ manager.js:205(anonymous function) @ manager.js:470
localhost/:1

XMLHttpRequest cannot load http://0.0.0.0:8080/socket.io/?EIO=3&transport=polling&t=1450823884019-16. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 404.

git 里用这行命令下载不了。不过在github里可以

$ git clone [email protected]:ruanyf/react-babel-webpack-boilerplate.git

运行npm run lint 报错

'jsx)'' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

关于webpack-dev-server参数配置

配置在webpack文件里面 根 配置在package json script 里面有什么区别吗

"start": "cross-env NODE_ENV=development webpack-dev-server --port 4000 --host 0.0.0.0 --inline --history-api-fallback --hot",

devServer: {
  prot: 4000
  ....
}