安装配置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. java常用IO

    字节流:FileInputStream.FileOutputStream 字符流:FileWriter.FileReader 转换流:InputStreamReader.OutputStreamRea ...

  2. String,StringBuffer,StringBuilder源码分析

    1.类结构 String Diagrams StringBuffer Diagrams StringBuilder Diagrams 通过以上Diagrams可以看出,String,StringBuf ...

  3. SpringMVC整合MongoDB

    首先,在pom文件中新增spring-data-mongodb的依赖: <dependency> <groupId>org.springframework.data</g ...

  4. 深入理解Activity启动流程(一)–Activity启动的概要流程

    概述 Android中启动某个Activity,将先启动Activity所在的应用.应用启动时会启动一个以应用包名为进程名的进程,该进程有一个主线程,叫ActivityThread,也叫做UI线程. ...

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

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

  6. HTML+CSS要点

    1.td占据多行 / 列时,其挤开的 td 不写(但是包裹 td 的 tr 要写) 2. display:td 的元素中的文本默认垂直不居中(table中的td中的文本是垂直居中的) 3.th虽然定义 ...

  7. JavaScript 工厂模式和订阅模式

    设计模式的好处: 代码规范 // 例如表单验证,两个 input ,一个用户名,一个密码 // 通常做法是 function checkUser(){ //..... } function check ...

  8. 【Sprint3冲刺之前】项目可行性研究报告

    TD校园手机助手软件可行性研究报告 1.引言 在信息化时代高速发展的今天,手机成了每个人的必备物品之一.随着科技的迅猛发展,人们已经不仅仅满足于用手机发短信,打电话,因此,android手机应运而生, ...

  9. Allegro基本操作——PCB布线

    转:http://blog.sina.com.cn/s/blog_1538bc9470102vyyq.html http://www.elecfans.com/article/80/110/2010/ ...

  10. ppycharm设置解释器版本号码

    在pycharm中点击File,之后在弹出的窗口中输入Project Interpreter,点击之后就可以看到自己的解释器版本是多少了,也可以随意选择想要用的解释器版本号码: