React系列1-飞速搭建React+ES6+Webpack开发环境

怎样最快速的搭建 现代的 react开发/学习环境呢? 因为官方默认都采用 ES6了,所以我们需要采用构建工具利用babel把 ES6转换为 ES5,这里我们使用webpack.

快速搭建react+es6开发环境可以按照以下几步:

1.安装 nodejs环境,这个请自行百度一下,很简单.

2.全局安装 webpack 和 webpack-dev-server,这个server可以帮助我们修改文件后做到 livereload实时刷新;

全局安装之后,我们可以在 package.json中的 scripts中设置参数来启动webpack 和 webpack server

打开命令行,分别执行下面几个 命令:

npm install -g webpack

npm install -g webpack-dev-server

3.全局安装react-init-tool 包,可以帮我们生成默认的 package.json和webpack.config.js,我们基本不需要再配置了

执行命令:

npm install -g react-init-tool

4.使用react-init-tool命令来生成项目基础文件,myproject是你项目的名字

到某个目录下执行命令:

react-init-tool myproject 生成 pakcage.json等文件

cd myproject 进入项目文件夹

npm install 安装 package.json中所依赖的包

可以生成如下目录和 node_modules (此结构在mac中可以通过 homebrew 安装 tree,使用 tree命令来展示目录结构)

我们可以看到生成了package.json文件,包含了我们开发react所需要的npm包

{
    "name": "myproject","version": "1.0.0","scripts": {
        "test": "echo "Error: no test specified" && exit 1","start": "webpack-dev-server --hot --inline --progress --colors","build": "webpack --progress --colors"
    },"devDependencies": {
        "babel-core": "^6.18.2","babel-loader": "^6.2.7","babel-preset-es2015": "^6.18.0","babel-preset-react": "^6.16.0","babel-preset-stage-0": "^6.16.0","css-loader": "^0.25.0","style-loader": "^0.13.1","webpack": "^1.13.3","webpack-dev-server": "^1.16.2"
    },"dependencies": {
        "react": "^15.3.2","react-dom": "^15.3.2"
    }
}

5.我们可以执行以下命令来执行 "scripts"中对应的命令,从而来启动 webpack打包,和 webpack-dev-server服务器

npm run build#打包,本质上会执行package.json中的: webpack --progress --color 命令

npm start#启动服务器,会执行: webpack-dev-server --hot --inline --progress --colors

6.如果启动成功,server 默认端口号是8080,我们可以在浏览器中,使用 localhost:8080/index.html来访问啦

src/js/app.js 内容

import React from 'react';
import ReactDOM from 'react-dom';
import '../css/app.css';

ReactDOM.render(
  <div>Hello,world</div>,document.getElementById('root')
);

7.如果报错,可能是 8080端口被占用了,修改 package.json中的,start命令,修改端口为9898

"start": "webpack-dev-server --hot --inline --progress --colors--host localhost --port 9898"

重新执行 :

npm start

在浏览器中打开: localhost:9898/index.html,令人兴奋的 Hello world !出来啦!

8.下一步,你可以尽情使用 ES6 + React 玩耍啦,修改 app.css 或者 新建其他 js文件,用ES6语法导入进来试试!

9.当然你的项目目录不一样,需要在 webpack.config.js中修改 webpack的编译目录

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!