React+webpack开发环境

2017-05-15 本文已影响0人珍珠林

创建一个项目文件夹
生成一个package.json文件

npm init --yes

安装webpack和webpack-dev-server

npm install webpack webpack-dev-server --save-dev

安装Babel loader
webpack loader用于特定格式文件的转换

npm install babel-core babel-loader --save-dev

安装babel-preset-es2015
babel-preset-es2015 ES6语法包，使代码可以使用ES6的新特性，const、箭头函数等

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

安装babel-preset-react
babel-preset-react React语法包，用于React优化，让代码可以使用React ES6 classes的写法，同时支持JSX语法格式

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

配置.babelrc
在项目根目录新建.babelrc，配置如下：

// 告诉Babel，编译JavaScript代码的时候要用这两个presets编译
{
  "presets": ["es2015", "react"]
}

安装ESLint
ESLint提供一个完全可配置的代码检查规则，同时提供了非常多的第三方plugin。同时它有着ES6语法的最佳支持
安装ESLint loader

npm install eslint eslint-loader --save-dev

ESLint有很多第三方配置好的格式插件，我们使用Airbnb开发配置合集eslint-config-airbnb

// eslint-config-airbnb包括了以下3个插件，需要安装
npm install eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev
npm install eslint-config-airbnb --save-dev

配置.eslintrc

在根目录下创建.eslintrc，并配置

module.exports = {
  // 指定校验的ecma的版本，及ecma的一些特性
  "parserOptions": {
    "ecmaVersion": 8, //指定ECMAScript支持的版本，6为ES6
    "sourceType": "module" //指定来源的类型，有两种”script”或”module”
  },
  // Environment可以预设其他环境的全局变量，如brower、node、es6、mocha环境变量等
  "env": {
    "es6": true,
    "node": true,
    "browser": true,
  },
  // 指定你所要使用的全局变量
  "globals": {
    "document": true,
    "navigator": true,
    "window":true,
    "node":true
  },
  // 使用第三方Airbnb开发配置合集eslint-config-airbnb
  "extends": "airbnb",
  // eslint-config-airbnb包括了以下3个插件
  "plugins": [
    "react",
    "jsx-a11y",
    "import"
  ],
  "rules": {
    "comma-dangle": ["error", "never"], // 列表或数组末尾不允许逗号
    "indent": ["error", 4], // 4缩进
    'no-console': ["error", { allow: ["info", "warn", "error"] }]
  }
};

这个配置文件的意思是直接继承airbnb的默认配置规则，同时写入自己的规则，会覆盖默认规则。这里的自定义规则允许对象或数组的最后一项可以不加逗号。

安装webpack针对css文件转换的loader

npm install style-loader css-loader --save-dev

安装webpack插件html-webpack-plugin
html-webpack-plugin，用来生成HTML页面，并引入正确的JavaScript依赖

npm install html-webpack-plugin --save-dev

配置webpack
在项目根目录下创建app文件夹，新建webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
// 一些常用路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
module.exports = {
    entry: {
        app: path.resolve(APP_PATH, 'app.jsx')
    },
    output: {
        path: BUILD_PATH,
        filename: 'bundle.js'
    },
    // 开启dev source map
    devtool: 'eval-source-map',
    // 开启 webpack dev server
    devServer: {
        historyApiFallback: true,
        hot: true,
        inline: true
        //progress: true
    },
    resolve: {
        extensions: ['.js', '.jsx']
        //root: APP_PATH
    },
    module: {
        // 配置preLoaders, 将eslint添加进去
        loaders: [
            {
                test: /\.jsx?$/,
                loaders: ['eslint-loader'],
                include: APP_PATH,
                enforce: 'pre'
            }, {
                test: /\.jsx?$/,
                loaders: ['babel-loader'],
                include: APP_PATH
            }
        ]
    },
    // 配置plugin
    plugins: [
        new HtmlwebpackPlugin({
            title: 'My first react app'
        })
    ]
};

上面的配置把app文件夹的app.jsx作为入口，用配置好的babel-loader处理它，在Babel处理前先用ESLint检查代码格式，最后使用HtmlwebpackPlugin在build文件夹中生成处理后的HTML文件。我们还添加了一个resolve的参数，把JSX扩展名添加进去，从而支持JS中import加载JSX扩展名的脚本。

在npm中添加webpack的自定义命令

"scripits": {
    "build": "webpack",
    "dev": "webpack-dev-server --hot"
}

把React库添加到项目中

npm install react react-dom --save

新建app.jsx文件

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    constructor(props) {
      super(props);
    }
    render() {
      return (
        <div className="container">
          <h1>Hello React!</h1>
        </div>
      );
    }
};
const app = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(<App />, app);

运行

npm run dev

webpack-dev-server会新建一个基于Express的服务器，打开浏览器http://localhost:8080 发现大标题，但是打开控制台或终端，会发现出现一些ESLint错误。将代码修改成如下即可：

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
    return (
      <div className="container">
        <h1>Hello React!</h1>
      </div>
    );
}
const app = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(<App />, app);

安装Babel的preset，实现组件热加载

npm install babel-preset-react-hmre --save-dev

再次配置.babelrc

{
    "presets": ["react", "es2015"],
    // 在开发的时候才启用HMR和Catch Error
    "env": {
      "development": {
        "presets": ["react-hmre"]
      }
    }
}

如果你是用react-redux开发，那么下面这些也要安装：

npm install --save redux
npm install --save react-redux
npm install --save react-thunk
npm install --save redux-logger
npm install --save redux-promise-middleware
npm install --save-dev redux-devtools

React+webpack开发环境

猜你喜欢

热点阅读