安装配置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. OS | Socket

    TCP 创建socket: int socket(int domain, int type, int protocol); AF = Address FamilyPF = Protocol Famil ...

  2. POJ 3259 Wormholes 最短路+负环

    原题链接:http://poj.org/problem?id=3259 题意 有个很厉害的农民,它可以穿越虫洞去他的农场,当然他也可以通过道路,虫洞都是单向的,道路都是双向的,道路会花时间,虫洞会倒退 ...

  3. HTTPS协议工作流程

    被问到了,复习一下HTTPS的工作流程 提到https,不得不提SSL SSL 1.        安全套接字(Secure Socket Layer,SSL)协议是Web浏览器与Web服务器之间安全 ...

  4. 335. Self Crossing

    /* * 335. Self Crossing * 2016-7-10 by Mingyang */ // Categorize the self-crossing scenarios, there ...

  5. android_浅析canvas的save()和restore()方法

    <span style="font-size:18px;"> </span> <span style="font-size:18px;&qu ...

  6. 【转载】面向切面编程(AOP)学习

    看到这篇文章,学习一下:http://www.ciaoshen.com/2016/10/28/aop/ 想理清一下从“动态代理”,到 “注释”,到“面向切面编程”这么一个技术演进的脉络. 只想讲清楚两 ...

  7. 编译php ./configure命令enable和with有什么区别

    原文: https://segmentfault.com/q/1010000009174725 ---------------------------------------------------- ...

  8. tomcat7设置usernamepassword

    因为tomcat是绿色版.今天想在网页上管理项目,却发现没实username和password.打开tomcat-users.xml文件全都是凝视.如图: 将例如以下代码拷贝到tomcat-users ...

  9. JS中Float类型加减乘除 修复 JQ 操作 radio、checkbox 、select LINQ to SQL:Where、Select/Distinct LINQ to SQL Count/Sum/Min/Max/Avg Join

    JS中Float类型加减乘除 修复   MXS&Vincene  ─╄OvЁ  &0000027─╄OvЁ  MXS&Vincene MXS&Vincene  ─╄Ov ...

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

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