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

2024-03-28 20:08:34

本文介绍了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"]
  }
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

webpack入门+react环境配置

小结放在前:这篇文章主要是为下一篇的react提前铺好路,webpack是一个前端资源模块化管理和打包工具,说白了就是方便我们管理自己的常用的一些代码,比如你开发中用到sass以及jade同时用到es6,开发时你不可能改动某个地方就挨个命令去转换在到浏览器去看效果,那样效率是非常低的.所以webpack帮我们省去了那些多余的步骤 webpack 基本安装开始前还是万万不能缺少的安装: npm install webpack -g 安装完接着是建个文件夹新建一个package.json依赖管理文
webpack3+React 的配置全解

webpack3 的配置相对于webpack2 又有了一些新的变化,这里讲其记录下来,备查 . package.json 的完整文件在结尾 . 1. 安装 npm init yarn add webpack webpack-dev-server -D 2. 配置简单输入输出 webpack.config.js module.exports = { entry: { ventor: ['react', 'react-dom'], index: [ 'babel-polyfill', 'react-
webpack 2.x配置reactjs基本开发环境详解

本文介绍了webpack 2.x配置reactjs基本开发环境详解,分享给大家,具体如下: 当前webpack版本:2.2:react: 15.4.2 webpack从1.x升级到2.x替换了几个接口,包括module.loaders这样的重要接口已被弃用(详细变更).官网目前已不推荐使用1.x版本,早上折腾一番,根据2.2版本配置了react基本的开发环境,满足不太复杂的web应用开发,后期会逐步优化配置文件. 如果您之前使用过webpack,需要改动的地方并不大.下文假定您没有接触过类似的打
浅谈react+es6+webpack的基础配置

这是模块化开发.主流框架和最新版的ECMAScript语法规范的一个小demo 准备工作安装 nodeJs 首先进入node官网,去下载最新版的nodeJs webpack 安装webpack npm install webpack -g 参数-g表示全局安装webpack,你在cmd命令中哪个文件夹下都可以使用webpack的命令,如果不加-g的话,是只可以在你安装webpack的目录下使用webpack这个命令 webpack 也有一个 web 服务器 npm install webpac
webpack 2的react开发配置实例代码

基于webpack 2.3的标准语法,包含了less变量替换.React组件热加载.第三库单独输出.区分生产与开发环境等常用配置. 'use strict' module.exports = function( env ) { // 生成环境下webpack使用-p参数开启代码压缩 // webpack[-dev-server]使用--env dev参数指定编译环境 var isDev = env == 'dev'; var path = require( 'path' ); var webpa
详解基于webpack搭建react运行环境

最近由于项目需要,所以尝试使用webpack搭建react运行环境,在克服了一系列困难后,终于能在页面输出"Hello World",特地把整个过程记录下来,利人利己. 首先我创建了一个文件夹webpack-helloworld-demo,之后的大部分操作都会在这个文件夹下进行. 1.初始化文件夹 npm init //初始化一个package.json文件 git init //产生.git文件,便于之后版本提交回退 2.搭建webpack环境 npm install webpack
react.js使用webpack搭配环境的入门教程

本文介绍了react.js使用webpack搭配环境的入门教程,分享给大家,也给自己做个笔记如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g create-react-app //安装create-react-app脚手架 npm为node.js的包管理工具,请确保你已经安装了node.js create-react-app my-app //使用create-react-app创建,my-app为项目名称
利用React-router+Webpack快速构建react程序

本文主要介绍的是使用React-router和Webpack如何快速构建一个react程序,下面话不多说,感兴趣的可以一起学习学习. 初始化项目我们先创建个空文件夹,然后初始化 package.json ,填写一些基本信息. $ npm init 接下来我们开始安装依赖项,我的 package.json 的依赖项如下 "devDependencies": { "babel": "^5.5.6", "babel-core":
React + webpack 环境配置的方法步骤

本文介绍了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-c
OpenCV4.1.0+VS2017环境配置的方法步骤

将VS2017上配置OpenCV4.1.0的过程记录于此. 准备工具: OpenCV:4.1.0 IDE:VS2017 安装环境:Win10 64位操作系统主要步骤: 下载OpenCV自解压程序安装VS2017 新建项目配置包含路径配置库目录配置链接器配置环境变量重启VS2017 测试配置是否成功详细过程: 1. 下载OpenCV自解压程序打开https://opencv.org/releases.html,可以看到如图1的界面. 图1 OpenCV4.1.0下载界面点
docker的pdflatex环境配置的方法步骤

技术背景 Latex在文档撰写方面是不可或缺的工具,尤其是在写文章方面,是必须要用到的文字排版工具.但是latex的环境部署并不是一个特别人性化的操作,尤其是在各种不同的平台上操作是完全不一样的,还经常容易报错.我们可以一个一个的去解决报错问题,但是这需要耗费极大的精力和时间,所以很多人选择了直接在overleaf进行latex的创作.但其实overleaf也有它的缺点,比如免费版本的带宽和速度都比较受限,尤其是在国内的网络,访问速度可谓是"一绝".因此这里我们介绍一个更加人性化的方案
使用virtualenv创建Python环境及PyQT5环境配置的方法

一.写在前面从学 Python 的第一天起,我就知道了使用 pip 命令来安装包,从学习爬虫到学习 Web 开发,安装的库越来越多,从 requests 到 lxml,从 Django 到 Flask,各种各样的库都处在一个 Python 环境之中. 这种做法对于我这种懒人来说是再适合不过的了,但是这样也是会有问题的.第一个问题在于 Pycharm 的加载速度变得慢了,因为要导入太多包了,而其中很多包对于很多程序来说根本用不上.第二个问题在于很多模块之间是有版本要求的,都需要特定的版本才能执行
PyTorch在Windows环境搭建的方法步骤

一.安装Anaconda 3.5 Anaconda是一个用于科学计算的Python发行版,支持Linux.Mac和Window系统,提供了包管理与环境管理的功能,可以很方便地解决Python并存.切换,以及各种第三方包安装的问题. 二.下载和安装个人建议推荐在清华的镜像来下载.选择合适你的版本下载,我使用的是Anaoonda3-5.1.0-Windows-x86_64.exe 可能安装速度有点慢,不太清楚是我电脑系统盘快慢的原因还是什么. 环境变量配置将D:\ProgramData\Anac
基于Docker部署GitLab环境搭建的方法步骤

注意:建议虚拟机内存2G以上,一定要配置阿里云的加速镜像 1.下载镜像文件 docker pull beginor/gitlab-ce:11.0.1-ce.0 2.创建GitLab 的配置 (etc) . 日志 (log) .数据 (data) 放到容器之外, 便于日后升级 mkdir -p /mnt/gitlab/etc mkdir -p /mnt/gitlab/log mkdir -p /mnt/gitlab/data 3.运行GitLab容器进入/mnt/gitlab/etc目录,运行一
javaweb 项目初始配置的方法步骤

目录项目初始流程: 数据库的建立于一开始的分层: db.properties: 首先创建数据库连接的工具类:DBUtil 1:得到配置文件对象: 2:获取数据库连接: 3:关闭资源: DBUtil类全部代码: 使用日志: 项目初始流程: 首先说一下pom.xml文件的依赖: <dependencies>  <dependency> <groupId>junit</groupId> <artifactId&
windows server 2016 域环境搭建的方法步骤(图文)

目录搭建环境准备搭建主DC 搭建辅DC 搭建和配置DNS 搭建和配置DHCP 域内加入主机和用户创建OU 设立GPO 本文主要记录一下自己搭建的一个域环境进行测试搭建环境准备搭建主DC搭建辅DC搭建和配置DNS搭建和配置DHCP域内加入主机和用户创建OU设立GPO 搭建环境准备 DC1:windows server 2016主机A: windows 10主机B: windows 10DC2:windows server 2019(辅) 搭建主DC 1)windows server 201
PyCharm+PySpark远程调试的环境配置的方法

前言:前两天准备用 Python 在 Spark 上处理量几十G的数据,熟料在利用PyCharm进行PySpark远程调试时掉入深坑,特写此博文以帮助同样深处坑中的bigdata&machine learning fans早日出坑. Version :Spark 1.5.0.Python 2.7.14 1. 远程Spark集群环境首先Spark集群要配置好且能正常启动,版本号可以在Spark对应版本的官方网站查到,注意:Spark 1.5.0作为一个比较古老的版本,不支持Python 3.6+
Node.js+Vue脚手架环境搭建的方法步骤

Node.js的下载 node下载地址:https://nodejs.org/zh-cn/download/ 下载后安装即可.新版Node.js自带npm包管理器 # 查看node的版本 node -v # v12.16.1 # 查看npm版本 npm -v #6.13.4 第一个Node.js程序,新建helloworld.js文件,内容如下 console.log("Hello World") console.log("第一个Node.js程序!") 进入终端

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

相关推荐

随机推荐