注明: 本文为翻译文章 翻译原文
借助babel和webpack es6语法写react
环境
react & react dom
$ npm i --save-dev react react-dom
webpack & webpack-dev-server
webpack: 打包js成一个bundle
webpack-dev-server: 开发web 服务器
$ npm i --save-dev webpack
$ npm install webpack-dev-server -g
babel
npm install --save-dev babel-loader
npm install --save-dev babel-core
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
package.json
{
"name": "todolist",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"server": "webpack-dev-server --colors --process"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^2.6.1"
},
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1"
}
}
.babelrc
{
"presets": ["react", "es2015"]
}
代码
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './main.js',
output: { path: __dirname, filename: 'bundle.js' },
module: {
loaders: [
{
test: /.jsx?$/,// 文件过滤规则
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']// es2015 处理 ES6 语法,react 处理 jsx 语法
}
}
]
},
};
hello.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class Hello extends React.Component {
render() {
return <h1>Hello</h1>
}
}
ReactDOM.render(<Hello/>, document.getElementById('hello'));
main.js
import Hello from './hello.jsx';
测试
开启服务
$ webpack-dev-server --progress --colors
引用bundle
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello React</title>
</head>
<body>
<div id="hello"></div>
<script src="bundle.js"></script>
</body>
</html>
遇到的问题
全局安装webpack-dev-server过后,在项目根目录下运行$ webpack-dev-server 报以下错误:
throw err;
^
Error: Cannot find module 'debug'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/usr/local/lib/node_modules/webpack-dev-server/node_modules/finalhandler/index.js:14:29)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
发现直接在任意目录下运行$ webpack-dev-server 都会出现上面的报错,其实是webpack和webpack-dev-server版本不匹配导致的(其实在全局安装webpack-dev-server的时候控制台已经开始报npm warning了,以后使用npm install的时候需要注意控制台报的警告和报错),然而安装webpack-dev-server匹配的版本webpack,发现根本识别不到webpack的安装,遂更新npm: $ sudo npm install -g npm,然而在项目目录下运行webpack-dev-server又出现另外一个错误:
module.js:471
throw err;
^
Error: Cannot find module 'loader-runner'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Users/baidu/Documents/learn/react-redux/demo/todolist/node_modules/webpack/lib/NormalModule.js:25:44)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
以上报错是因为全局安装了webpack-dev-server,本地也安装了webpack-dev-server导致冲突,遂删除项目目录下的node_modules/*,重新安装依赖 $ npm i
附加: 如果遇到其他问题,有可能是端口被占用
提示
全局安装的webpack和webpack-dev-server均为1.x.x
示例
以下在mac命令行中运行
# 克隆项目
$ git clone https://github.com/doudounannan/react-redux.git
$ cd react-dedux
$ git checkout webpack-babel-es6-react
$ cd demo/webpack-babel-es6-react
$ npm run build
# webpack开始编译成一个bundle.js