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 相关文章推荐
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
js实现圆盘记速表
Aug 03 Javascript
javascript实现标签切换代码示例
May 22 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 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
文件上传类
2006/10/09 PHP
PHP编程与应用
2006/10/09 PHP
针对初学PHP者的疑难问答(2)
2006/10/09 PHP
php Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
Angular2 路由问题修复详解
2017/03/01 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
pandas通过loc生成新的列方法
2018/11/28 Python
Django多数据库联用实现方法解析
2020/11/12 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
打架检讨书100字
2014/01/19 职场文书
六一儿童节活动策划方案
2014/01/27 职场文书
教师四风问题整改措施
2014/09/25 职场文书
2014年团支书工作总结
2014/11/14 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
windows server2008 开启端口的实现方法
2022/06/25 Servers