安装配置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"]
}
}
}

来源:https://segmentfault.com/a/1190000011040484

React + webpack 环境配置的更多相关文章

  1. 史上最全Windows版本搭建安装React Native环境配置

    史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...

  2. 史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用

    史上最详细Windows版本搭建安装React Native环境配置   2016/01/29 |  React Native技术文章 |  Sky丶清|  95条评论 |  33530 views ...

  3. React Native环境配置

    React Native环境配置 史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有 ...

  4. 二、react开发环境配置与webpack入门

    Webpack 模块打包工具(module bundler)功能: 将 CSS.图片与其他资源打包 打包之前预处理(Less.CoffeeScript.JSX.ES6 等)档案 依 entry 文件不 ...

  5. 基于webpack4的react开发环境配置

    一.基础配置 1.init项目 mkdir react-webpack4-cook cd react-webpack4-cook mkdir src mkdir dist npm init -y 复制 ...

  6. React开发环境配置

    本文以上一篇文章继续配置:npm安装及环境配置<https://www.cnblogs.com/hzb462606/p/11565275.html> 使用 create-react-app ...

  7. windows 7下React Native环境配置

    React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 .FaceBook 也号称这们技术是 “Le ...

  8. React Native环境配置和简单使用

    # 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...

  9. 最详细React Native环境配置及项目初始化(2018-10-14)

    注意配环境一定要全程使用稳定VPN工具,否则会浪费大量时间!!!相信我 一.截止到项目初始化之前也就是执行这条命令之前都按官网的方法就可以 https://reactnative.cn/docs/ge ...

随机推荐

  1. HOJ - 2715最小费用流

    国庆八天乐,刷题也快乐. HOJ崩了,但是VJ可以把题目挂出来. 题目链接:https://vjudge.net/contest/188441#problem/A 涉及到矩阵里面的网络流,化为图来做. ...

  2. Wannafly挑战赛16

    E(pbds) 题意: 1<=m,n<=5e5 分析: 首先指向关系形成了一个基环外向树森林 实际上我们可以完全不用真正的去移动每个球,而只需要在计数的时候考虑考虑就行了 对于树上的情况, ...

  3. hadoop之hdfs及其工作原理

    hadoop之hdfs及其工作原理 (一)hdfs产生的背景 随着数据量的不断增大和增长速度的不断加快,一台机器上已经容纳不下,因此就需要放到更多的机器中,但这样做不方便维护和管理,因此需要一种文件系 ...

  4. iphone坐标系统

    1,基本概念 CGPoint{x,y};空间中的位置,通过x和y坐标定义 CGSize{width, height}; 大小,通过宽度和高度定义 CGRect{origin, size};位置和大小, ...

  5. [反汇编练习] 160个CrackMe之035

    [反汇编练习] 160个CrackMe之035. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...

  6. Food hub

    Work center List Tillage 耕作 Hand harvest 手工采收 Planting 种植 Cultivating 培养 Mulching 覆盖 Dig harvest 挖地采 ...

  7. Oracle oledb 打包并集成到程序安装包(VC ADO訪问Oracle)

    近期有一个项目和oracle交互,我用的是ADO的方式进行试问操作. 首先把数据库连接的东东记录一下,老了记性不好啊! 操作例如以下: //连接串这么写的话就能够不用配置 tnsnames.ora配置 ...

  8. ACPI in Linux

    https://01.org/zh/linux-acpi The goal of this project is to enable Linux to take advantage of platfo ...

  9. angularJS 常用插件指令

    长时间没有登入博客园了,今天突然想了想,当初开这个的目的,其实就是为了记录你当下的一个状态和累计一些问题,所以记录这些还是很有意义,毕竟不是什么牛,靠脸又吃不饱的这个年代,需要留下一些东西给自己看也好 ...

  10. C# 通过Hook的方法 屏蔽快捷键

     #region 屏蔽Windows功能键(快捷键)         public delegate int HookProc(int nCode, int wParam, IntPtr lParam ...