Webpack 4.x搭建react开发环境的方法步骤

本文介绍了了Webpack 4.x搭建react开发环境的方法步骤,分享给大家,也给自己留个笔记

必要依赖一览(npm install) 安装好。

"dependencies": {
  "babel-core": "^6.26.3",
  "babel-loader": "^7.1.5",
  "babel-preset-env": "^1.7.0",
  "react": "^16.4.2",
  "react-dom": "^16.4.2",
  "webpack": "^4.16.5"
  ...
}

babel系列是干什么用的呢?是为了支持es6以上的高级语法的编译。但是因为react有jsx这个东西存在,所以单纯的babel是不够的,此外要让babel作用于webpack,需要给webpack添加一个loader(以前版本叫loader,4.x版本开始改用‘rules'),在工程根目录新建webpack.config.js文件,并添加如下代码:

var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var deps = [
 ];

//以上代码可以忽略,没有必要不要添加noParse,因为依赖代码中可能会有环境的判断,而浏览器中是拿不到process变量的,会报错!
var config = {
  //这里是打包的入口
 entry: path.resolve(__dirname, './react/app.js'),
 resolve: {
  alias: {
  }
 },
 //打包完成后输出到./build/bundle.js文件中
 output: {
  path: path.resolve(__dirname, './build'),
  filename: 'bundle.js',
 },
 mode: 'development',
 module: {
   //上述的规则,loader就放在这里,这段没什么好说的,从Webpack官方文档上直接拿来用
  rules: [
    {
     test: /\.js$/,
     exclude: /(node_modules|bower_components)/,
     use: {
      loader: 'babel-loader',
      options: {
        //刚刚下载的module之一
       presets: ['babel-preset-env']
      }
     }
    }
   ]
 }
};

//遍历你的自定义要排除的依赖,安装到node_modules里的依赖一般不需要排除掉
deps.forEach(function (dep) {
  var depPath = path.resolve(node_modules, dep);
  config.resolve.alias[dep.split(path.sep)[0]] = depPath;
  config.module.noParse.push(depPath);
 });

module.exports = config;

以上代码可以直接用,请先将注释去掉。有了以上文件配置,你可以直接在package.json中添加scripts来打包你的app.js。

...
"scripts": {
  ...
  "build-config": "webpack",
  ...
}
...

执行npm run build-config可执行打包操作,但是目前为止还是会报错,因为缺少babel设置,webpack打包时无法识别jsx语法,什么时jsx语法?就是在js代码中写的类似于dom结构的东西,如下:

...
<h1 onClick={this.handleClick.bind(this)} style={{ color: "red" }}>
  {'Hello ' + this.state.text}
</h1>
...

要解析这个东西还需要添加.babelrc文件,在其中添加:

{
  "plugins": ["transform-react-jsx"]
}

这句主要是说在babel参与打包时,会启用jsx转换成js的插件。到这里你已经可以成功打出你想要的bundle.js

> webpack

Hash: e716d360a6a752006c09
Version: webpack 4.16.5
Time: 973ms
Built at: 2018-08-14 15:19:14
  Asset   Size Chunks       Chunk Names
bundle.js 715 KiB  main [emitted] main
Entrypoint main = bundle.js
[./react/app.js] 2.74 KiB {main} [built]
  + 21 hidden modules

webpack打包的好处就是这里,可以让你的app加载速度更快,如上的包总计715kb,隐藏了没有用到的模块21个。这就是为什么要搭手脚架开发的理由。

jsx-transform的坑

此外还有一点要说一下,就是在引入React时,请整个引入,要么就额外引入它在编译后的代码中可能会用到的api,否则会说什么什么没找到而导致页面加载不出来。看编译后的代码:

var _react = __webpack_require__(/*! react */ "./node_modules/react/index.js");
var _react2 = _interopRequireDefault(_react);
...
_createClass(MyTitle, [{
key: "handleClick",
value: function handleClick() {
  this.setState({
  text: "Clicked"
  });
}
}, {
key: "render",
value: function render() {
  return _react2.default.createElement(
  "h1",
  { onClick: this.handleClick.bind(this), style: { color: "red" } },
  'Hello ' + this.state.text
  );
}
}]);

如果你不引入react, 编译后render()函数中的_react2会是React.createElement而React显然是找不到这个变量的。看到编译后的代码,你可能更能理解,哦在jsx的dom中那样写原来是这个意思啊···

Vscode中开发,需要配置好eslint

react中有大量的es6的写法,如果不配置eslint你会看到大量飘红,首先是在项目的开发环境安装依赖:

"devDependencies": {
  ···
  "eslint": "^5.3.0",
  "eslint-plugin-import": "^2.14.0"
  ···
}

在项目根路径下添加.eslintrc.json,并添加以下代码[^eslint]:

{
 "parserOptions": {
   //使用的ecma版本
  "ecmaVersion": 6,
  "sourceType": "module",
  //使用jsx特性
  "ecmaFeatures": {
   "jsx": true
  }
 },
 "rules": {
   //忽略console的警告
  "no-console": "off",
  "semi": ["error", "always"]
 }
}

参考:

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

(0)

相关推荐

  • 详解Webpack+Babel+React开发环境的搭建的方法步骤

    1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等)作为模块进行编译后进行打包. 2.安装Webpack 要开始使用Webpack在项目中进行开发前我们首先需要在全局环境中进行安装. npm install webpack -g 3.创建一个项目 安装好后创建一个名叫learn-webpack的项目并进入该项目文件夹,当然项目名字你可以起你自己想要的

  • 使用webpack搭建react开发环境的方法

    1.初始化项目 mkdir react-redux && cd react-redux npm init -y 2.安装webpack npm i webpack -D npm i -D 是 npm install --save-dev 的简写,是指安装模块并保存到 package.json 的 devDependencies中,主要在开发环境中的依赖包. 如果使用webpack 4+ 版本,还需要安装 CLI. npm install -D webpack webpack-cli 3.新

  • 基于webpack4搭建的react项目框架的方法

    介绍 框架介绍,使用webpac构建的react单页面应用,集成antd.使用webpack-dev-server启动本地服务,加入热更新便于开发调试.使用bundle-loader进行代码切割懒加载 手动搭建,不使用cli,大量注释适合初学者对webpack的理解学习,对react项目的深入了解 启动 git clone https://gitee.com/wjj0720/react-demo.git cd react-demo yarn yarn start 打包 yarn build 目录

  • 详解基于webpack搭建react运行环境

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

  • 从零开始搭建webpack+react开发环境的详细步骤

    环境主要依赖版本 webpack@4.8.1 webpack-cli@2.1.3 webpack-dev-server@3.1.4 react@16.3.2 babel-core@6.26.3 babel-preset-env@1.6.1 bable-preset-react@6.24.1 webpack安装及配置 1. 起步 新建项目目录,初始化npm,新建开发源目录 mkdir webpack-react && cd webpack-react npm init -y mkdir sr

  • webpack4 + react 搭建多页面应用示例

    webpack 升级到4之后还没好好的同步一个可实用的webpack架子,接下来用webpack4来搭建一个简单的react的多界面应用,废话不说 直接撸码 创建工程 $ mkdir demo && cd demo $ npm init -y webpack 配置 安装react + babel 依赖 $ npm i -S react@16.3.0 react-dom@16.3.0 $ npm i -D webpack@4.4.1 webpack-cli@2.0.13 webpack-de

  • 手动用webpack搭建第一个ReactApp的示例

    学习 React 可以用以下方法直接创建一个 ReactApp ,本文主要介绍如何手动来搭这个环境. npm install -g create-react-app create-react-app my-app cd my-app npm start 使用淘宝 NPM 镜像 使用 React 和 Webpack 需要安装很多依赖包,不走代理的话速度会非常慢,也很容易出错,所以这里推荐使用淘宝的 npm 镜像来安装,速度非常理想. 使用淘宝镜像安装 npm 包只需要两步即可: 安装 cnpm n

  • Webpack 4.x搭建react开发环境的方法步骤

    本文介绍了了Webpack 4.x搭建react开发环境的方法步骤,分享给大家,也给自己留个笔记 必要依赖一览(npm install) 安装好. "dependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-env": "^1.7.0", "react&

  • VSCode搭建STM32开发环境的方法步骤

    目录 1.安装VScode 2.安装C/C++插件 3.安装Keil Assistant插件 4.用vscode打开keil工程 5.编译.下载程序 6.常用操作 官方简述 摘要: 作为一个51单片机或STM32单片机的使用者,keil一直是我们的必备的一款工具之一.但keil的一些问题也一直存在,当然也有人用其他的比如STM32CubeIDE.但是今天推荐的是VScode+Keil Assistant插件,不需要很复杂的配置各种文件和环境变量,只需要一个插件即可!可以编译代码和下载程序. 当我

  • Eclipse+ADT+Android SDK搭建安卓开发环境的实现步骤

    目录 运行环境 下载地址 环境下载 安装JDK 安装Eclipse 下载独立的Android SDK工具 ADT安卓开发工具安装 eclipse离线安装ADT插件 配置ADT插件 通过Android SDK Manage添加新的软件包 AVD Manage创建安卓虚拟机 运行环境 windows 7 下载地址 环境下载 最近开接触Android(安卓)嵌入式开发,首要问题是搭建Andoid开发环境,由于本人用的是windows7的笔记本,也就只能到Windows中搭建Android 开发环境了!

  • 使用Docker构建开发环境的方法步骤( Windows和mac)

    目录 1. 使用 Docker 的好处 2. 安装 Docker 1) Linux 安装 Docker 2) Windows 10 3) macOS 3. Docker 换源 1) Linux 换源 2) Windows 和 Mac 换源 4. 编写 Dockerfile 5. 编写 docker-compose.yml 6. 启动容器 7. 总结 我们在开发中都会遇到这样的问题:在本地开发好功能后,部署到服务器,或者其他人拉到本地接着开发时,会出现功能无法使用的情况. 这些异常情况,大多数时候

  • vs2019永久配置opencv开发环境的方法步骤

    有很多同学肯定想学习opencv相关的知识,但是有些情况下每建一次项目都要重新引入下各种文件是不是很苦恼,所以我也面临了这个问题,在网上看到很多的同学的方法,有的也都是很一样的,将什么.dll加入环境变量,然后设置项目配置文件什么的,这些东西我也尝试过,但是很容易忘记,我也特意写了一些笔记,但是有时还是会忘记.恰巧我也升级了vs2019,所以也打算更新下方法,做到一劳永逸.下面是教程部分.首先我们要安装好我们的opencv,然后我们安装以后会看到生成的文件夹.如图 这一切就是基础文件,所以这个务

  • 在Ubuntu中安装VSCode并配置C/C++开发环境的方法步骤

    第一步,打开Ubuntu Software下载VSCode.(so easy) 官网地址:https://code.visualstudio.com/docs/?dv=linux64_deb 然后使用 sudo dpkg -i  xxx.deb解压即可 第二步,如果你的电脑中没有gcc,g++,gdb的话,可以通过以下代码获得. sudo apt-get update //访问源列表,并读取软件列表 sudo apt-get install gcc sudo apt-get install g+

  • 使用IDEA搭建Hadoop开发环境的操作步骤(Window10为例)

    下载安装Hadoop 下载安装包 进入官网下载下载hadoop的安装包(二进制文件)http://hadoop.apache.org/releases.html 我们这里下载2.10.1版本的,如果想下载更高版本的请先去maven仓库查看是否有对应版本 解压文件 下载好的.gz文件可以直接解压. winRAR和Bandizip都可以用来解压,但是注意必须以管理员身份打开解压软件,否则会出现解压错误 配置环境变量 配置JAVA_HOME和HADOOP_HOME 我们在环境变量处分别设置JAVA_H

  • React Native 搭建开发环境的方法步骤

    本文介绍了React Native 搭建开发环境,分享给大家,具体如下: 准备工作 node -v:确认是否安装Node,若已经成功安装了,则执行下面的命令:否则先进行Node的安装. npm install -g create-react-native-app:使用npm快速创建React Native应用. create-react-native-app AwesomeProject:创建名为AwesomeProject的项目. cd AwesomeProject:进入项目所在文件目录. y

随机推荐