React + webpack 环境配置的方法步骤


Posted in Javascript onSeptember 07, 2017

本文介绍了React + webpack 环境配置的方法步骤,分享给大家,具体如下:

安装配置Babel

babel-preset-es2015 ES6语法包,使代码可以随意地使用ES6的新特性。

babel-preset-react React语法包,专门用于React的优化,在代码中可以使用React ES6 classes的写法,同时直接支持JSX语法格式

安装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

配置 .babelrc

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

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

安装配置ESLint

安装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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 #Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 #Javascript
微信小程序实现轮播图效果
Sep 07 #Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 #Javascript
JavaScript+CSS相册特效实例代码
Sep 07 #Javascript
AngularJS 打开新的标签页实现代码
Sep 07 #Javascript
基于Cookie常用操作以及属性介绍
Sep 07 #Javascript
You might like
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
PHP n个不重复的随机数生成代码
2009/06/23 PHP
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
php之curl设置超时实例
2014/11/03 PHP
详解PHP中的PDO类
2015/07/06 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
javascript import css实例代码
2008/07/18 Javascript
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
JavaScript知识点整理
2015/12/09 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
python插入排序算法的实现代码
2013/11/21 Python
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
python适合做数据挖掘吗
2020/06/16 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
造价工程师个人求职信
2013/09/21 职场文书
电子商务毕业生求职信
2013/11/10 职场文书
外企办公室竞聘演讲稿
2013/12/29 职场文书
教师节校长致辞
2015/07/31 职场文书
MySQL限制查询和数据排序介绍
2022/03/25 MySQL