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与函数式编程解释
Apr 27 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
Bootstrap图片轮播效果详解
Oct 17 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
原生js+css实现tab切换功能
Sep 17 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 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网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
Python的几种主动结束程序方式
2019/11/22 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
.NET remoting的两种通道是什么
2016/05/31 面试题
文秘专业大学生求职信
2013/11/10 职场文书
幼儿园消防安全制度
2014/01/26 职场文书
实验室标语
2014/06/21 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
浅谈JavaScript作用域
2021/12/06 Javascript
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记