配置React的Babel 6和Webpack 2环境

时间 2019-12-04

原文原文链接

Facebook的一帮子工程师在忙碌之余开发除了一套前段UI框架React。这个框架最大的有点就在于让UI的开发都基于组件，这样View都是根据props和state变化的。javascript

项目地址：https://github.com/future-cha...html

虽然学React比起来其余的前端框架要容易很多，可是其生态的各类工具（Babel, Webpack）却着实让人费一番功夫。事实上，这些工具不仅适用于React。可是为了发挥ES2015和JSX的威力须要它们。这里，咱们主要讨论如何创建React的开发环境，工具的事不作主要讨论。前端

如今开始进入正题

建立一个目录react-demo的目录，并在里面初始化npm项目。java

mkdir react-demo
cd react-demo
npm init

按照要求填写npm init命令须要的输入内容就能够。node

安装配置Webpack

Webpack是一个模块打包工具，能够把模块以及其依赖项一块儿打包成静态资源的工具。因为对加载器的支持，webpack和React完美契合。本文的后面会详细讨论。react

使用npm安装webpack。webpack

npm install webpack --save-dev

Webpack须要某些配置才能完成给他的工做。因此咱们须要建立一个webpack.config.js的配置文件。c++

touch webpack.config.js

在该文件中添加以下的代码。git

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: { 
    path: BUILD_DIR,
    filename: 'bundle.js'
  }
};

module.exports = config;

Webpack的配置最少须要两项，一个是入口属性，一个是输出属性。APP_DIR指向React项目的代码所在目录，BUILD_DIR指向打包后文件的输出目录。github

就如同配置项名称所表达的同样。entry是打包所须要的入口文件。若是你对静态语言，好比c/c++之类的熟悉的话。这个入口文件就是c/c++包含main方法的文件。Webpack支持多个入口文件。这里目录src/client/app里的index.jsx文件就是整个应用的入口文件。

output指明webpack在打包完成后须要作什么。这里，使用src/client/public目录存放打包后生成的文件bundle.js。

在src/client/app目录下建立文件index.jsx。并添加以下代码。

console.log('Hello World!');

在terminal里输入下面的命令。

$ ./node_modules/.bin/webpack -d

命令会调用webpack，生成开发环境下的bundle.js文件以及关联的map文件bundle.js.map。这两个文件都在配置文件制定的目录src/client/public下。

可是目前只看到了编译以后的js文件，不够直观。在目录src/client下建立一个index.html文件。这样js文件是否加载成功都能看到了。

<html>
  <head>
    <meta charset="utf-8">
    <title>React.js using NPM, Babel6 and Webpack</title>
  </head>
  <body>
    <div id="app" />
    <script src="public/bundle.js" type="text/javascript"></script>
    <span style="float:center">Yo!</span>
  </body>
</html>

如今打开浏览器，你就会看到“Yo”了。
注意：

有一个webpack的加载器`html-loader`能够自动建立html文件。里面会把编译之后的js文件的路径添加好。

使用Babel-Loader

就如前文所说，使用JSX和ES2015咱们的开发效率会更高。可是JSX语法和ES2015在某些浏览器里是不兼容的。

所以，若是咱们要使用React代码，咱们就须要使用一个工具把JSX和ES2015翻译成浏览器都支持的语法。Babel就是干这个用的。

在安装webpack的时候咱们就接触到了一个概念加载器，Webpack就是用这个加载器来翻译指定的文件的。

使用npm安装babel-loader。

npm install babel-loader babel-preset-es2015 babel-preset-react --save-dev

babel-preset-es2015和babel-preset-react是babel-loader使用的插件。专门用来翻译JSX和ES2015语法。安装以后还须要配置一下才能使用。

建立一个.babelrc的文件，并添加一下内容。

touch .babelrc

{
    "presets": ["es2015", "react"]
}

下一步就是告诉webpack使用babel-loader来打包文件。
打开webpack.config.js并添加以下内容。

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: [
          'babel-loader',
        ],
        include: [
          // path.resolve(__dirname, "app")
          APP_DIR
        ],
      },
};

module.exports = config;

loaders属性对应的值是一个数组。不过咱们只是用babel-loader。每个加载器都须要经过test属性指定能够处理的文件的后缀。咱们的babel-loader用来处理.js和.jsx文件。include属性指定处理哪一个目录下的文件。loader属性就是加载器的名称。

如今环境配置就都完成了。下面写几行代码体验一下。

Hello React

使用npm安装react和react-dom。

npm install react react-dom --save

把index.jsx文件里的console.log(...)替换成下面的代码。

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
    render() {
        return <p> Yo, React </p>
    }
}

render(<App />, document.getElementById('app'));

执行咱们上面说的命令。

./node_modules/.bin/webpack -d

如今你就能够在浏览器里看到Yo React了。

更进一步

让webpack监视文件变化

每次修改了文件以后还要中止-启动一次webpack的命令实在是太麻烦了。咱们能够简单的修改一下命令。

./node_modules/.bin/webpack -d --watch

如今webpack就在监视模式下运行了，每次文件修改发生以后都会自动打包。要看到实际效果，能够把Yo React修改为任何其余的字符串。以后在浏览器里刷新一下就会看到结果。

若是你连刷新浏览器都懒得能够使用react-hot-loader。

使用npm运行

命令./node_modules/.bin/webpack能够简化一下。

在packages.json文件里修改。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack -d --watch",
    "build": "webpack -p"
  },

如今使用命令npm run build就可让webpack在产品模式下运行了。在这个模式下会自动压缩打包好的文件。命令npm run dev会在监视模式下运行webpack。

添加一些文件

在示例中，咱们只有一个叫作App的组件。咱们来添加更多组件。

建立一个新的文件叫作AwesomeComponent.jsx,并添加以下代码。

import React from 'react';

class AwesomeComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {likesCount: 0};
        this.onLike = this.onLike.bind(this);
    }

    onLike() {
        let newLikesCount = this.state.likesCount + 1;
        this.setState({likesCount: newLikesCount});
    }

    render() {
        return (
            <div>
                Likes: <span>{this.state.likesCount}</span>
                <div><button onClick={this.onLike}>Like Me</button></div>
            </div>
        );
    }
}

export default AwesomeComponent;

在index.jsx文件中引入。

import React from 'react';
import {render} from 'react-dom';
import AwesomeComponent from './AwesomeComponent.js';

class App extends React.Component {
    render() {
        return (
            <div>
                <p> Yo, React </p>
                <AwesomeComponent />
            </div>
        )
    }
}

render(<App />, document.getElementById('app'));

若是webpack已经运行在监视模式下了，那么直接刷新一下浏览器就能够看到AwesomeComponent的运行结果了。

总结

本文能够用来指导你配置React的开发环境。