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"]
}
}
}
来源:https://segmentfault.com/a/1190000011040484
React + webpack 环境配置的更多相关文章
- 史上最全Windows版本搭建安装React Native环境配置
史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...
- 史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用
史上最详细Windows版本搭建安装React Native环境配置 2016/01/29 | React Native技术文章 | Sky丶清| 95条评论 | 33530 views ...
- React Native环境配置
React Native环境配置 史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有 ...
- 二、react开发环境配置与webpack入门
Webpack 模块打包工具(module bundler)功能: 将 CSS.图片与其他资源打包 打包之前预处理(Less.CoffeeScript.JSX.ES6 等)档案 依 entry 文件不 ...
- 基于webpack4的react开发环境配置
一.基础配置 1.init项目 mkdir react-webpack4-cook cd react-webpack4-cook mkdir src mkdir dist npm init -y 复制 ...
- React开发环境配置
本文以上一篇文章继续配置:npm安装及环境配置<https://www.cnblogs.com/hzb462606/p/11565275.html> 使用 create-react-app ...
- windows 7下React Native环境配置
React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 .FaceBook 也号称这们技术是 “Le ...
- React Native环境配置和简单使用
# 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...
- 最详细React Native环境配置及项目初始化(2018-10-14)
注意配环境一定要全程使用稳定VPN工具,否则会浪费大量时间!!!相信我 一.截止到项目初始化之前也就是执行这条命令之前都按官网的方法就可以 https://reactnative.cn/docs/ge ...
随机推荐
- python笔记1:python基础
1.Python模块的标准文件模板: #!/usr/bin/env python #第1行注释可以让这个 .py 文件直接在Unix/Linux/Mac上运行 # -*- coding: utf-8 ...
- luogu P1140 相似基因
题目背景 大家都知道,基因可以看作一个碱基对序列.它包含了4种核苷酸,简记作A,C,G,T.生物学家正致力于寻找人类基因的功能,以利用于诊断疾病和发明药物. 在一个人类基因工作组的任务中,生物学家研究 ...
- [LibreOJ β Round #4] 子集
显然是个二分图,直接求最大独立就行了. #include<bits/stdc++.h> #define ll long long #define pb push_back using na ...
- POJ2104Kth Number
整体二分模板题, 有些细节需要注意 #include<cstdio> #include<cctype> #include<climits> #include< ...
- mybatis学习网站
http://www.mybatis.org/mybatis-3/zh/index.html
- unigui控件的FASTSCRIPT封装
unigui控件的FASTSCRIPT封装 unit fs_uniControl; interface{$i fs.inc}uses fs_iinterpreter, fs_itools, fs_ie ...
- 【spring data jpa】启动报错:nested exception is java.util.NoSuchElementException
spring boot项目中 使用spring data jpa 启动报错: org.springframework.beans.factory.UnsatisfiedDependencyExcept ...
- 我是如何通过CSRF拿到Shell的
织梦内容管理系统(DedeCms) 以简单.实用.开源而闻名,是国内最知名的PHP开源网站管理系统,也是使用用户最多的PHP类CMS系统,在经历多年的发展,目前的版本无论在功能,还是在易用性方面,都有 ...
- java中finalkeyword
在java中有3个地方须要用finalkeyword: 1.假设一个不希望被继承,那么用final来修饰这个类 2.假设一个方法不须要被重写.那么这种方法用final来修饰 3.假设一个变量的值不希望 ...
- require.js使用
无可奈何,二开项目用了require.js! 一道槛是挨不过去了 require官网: http://requirejs.org/ require.js cdn: <script src=&qu ...