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 获取页面的高度及滚动条的位置的代码
May 06 Javascript
JavaScript中OnLoad几种使用方法
Dec 15 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
Vue实现购物车详情页面的方法
Aug 20 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判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
世界上最大的二手相机店:KEN
2017/05/17 全球购物
UDP协议功能
2013/01/06 面试题
什么是Web Service?
2012/07/25 面试题
酒店管理专业自荐信
2014/05/23 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
资产运营委托书范本
2014/10/16 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
质量负责人岗位职责
2015/02/15 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android