React + webpack 环境配置

前端之家收集整理的这篇文章主要介绍了React + webpack 环境配置前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

安装配置Babel

  • babel-preset-es2015 ES6语法包,使代码可以随意地使用ES6的新特性。
  • babel-preset-react React语法包,专门用于React的优化,在代码中可以使用React ES6 classes的写法,同时直接支持JSX语法格式
  1. 安装Babel loader
// 安装babel-core核心模块和babel-loader
npm install babel-core babel-loader --save-dev


// 安装ES6 和 React 支持
npm install babel-preset-es2015 babel-preset-react --save-dev
  1. 配置 .babelrc

安装完Babel和它的插件,配置一下它的规则,在根目录下新建一个.babelrc空文件

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

安装配置ESLint

  1. 安装ESLint loader

为webpack添加这个preLoaders(在loader处理资源之前,先用preLoaders进行处理,代码检查在代码转换之前进行)

npm install eslint eslint-loader --save-dev

这里使用Airbnb开发配置合集eslint-config-airbnb,这个配置合集里面还包括以下3个插件

npm install eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev

npm install eslint-config-eslint
  1. 配置 .eslintrc

在根目录下新建一个.eslintrc的空文件

{
   "extends": "airbnb","rules": {
     "comma-dangle": ["error","never"]
   }
 }

安装配置webpack

配置webpack之前,先安装一个webpack的插件——html-webpack-plugin,它可以帮助我们自动生成HTML页面,并且引入正确的JavaScript文件依赖:

npm install html-webpack-plugin —save-dev

在项根目录下新建一个webpack.config.js文件:

let path = require('path') 
let webpack = require('webpack')
let HtmlwebpackPlugin = require('html-webpack-plugin')
// 一些常用路径
const ROOT_PATH = path.resolve(__dirname)
const APP_PATH = path.resolve(ROOT_PATH,'app')
const BUILD_PATH = path.resolve(ROOT_PATH,'build')

module.exports = {
  entry: {
    app: path.resolve(APP_PATH,'index.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
  },modules: {
    // 配置preLoaders,将eslint 添加进去
    preLoaders: [
      {
        test: /\.jsx?$/,loaders: ['eslint'],include: APP_PATH
      }
    ],// 配置loader,将Babel添加进去
    loaders: [
      {
        test: /\.jsx?$/,loaders: ['babel'],include: APP_PATH
      }
    ]
  },// 配置 plugin
  plugins: [
    new HtmlwebpackPlugin({
      title: 'my first react webpack'
    })
  ],resolve: {
    extensions: ['','.js','.jsx']
    // 在js中import加载jsx扩展名的脚本
  }
}

添加组件热加载(HMR)功能

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

这个preset里面其实包括两方面:

  • react-transform-hmr用来实现热加载
  • react-transform-catch-errors用来捕获render里面的方法,并且直接展示在界面上

配置一下 .babelrc:

{
  "preset": ["es2015","react"],"env": {
    "development": {
      "presets": ["react-hrme"]
    }
  }
}

猜你在找的React相关文章