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


Posted in Javascript onAugust 15, 2018

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

参考:

  • eslint官方文档
  • babel-plugin-transform-jsx文档
  • webpack4.15.1 官方文档
  • babelrc 配置文档
  • React+Webpack快速上手指南(虽然已经过时,还有部分不适用,但是还是借鉴了一部分代码)
  • 阮一峰 四课时培训课,虽然过时,但是还是能带你体验一番前端开发

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

Javascript 相关文章推荐
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
React+Webpack快速上手指南(小结)
Aug 15 #Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 #Javascript
关于微信小程序bug记录与解决方法
Aug 15 #Javascript
layui select获取自定义属性方法
Aug 15 #Javascript
Vue自定义toast组件的实例代码
Aug 15 #Javascript
JavaScript中set与get方法用法示例
Aug 15 #Javascript
基于JavaScript实现瀑布流布局
Aug 15 #Javascript
You might like
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
PHP经典面试题集锦
2015/03/19 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
2017/06/19 Javascript
浅谈js闭包理解
2019/04/01 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
用Python解数独的方法示例
2019/10/24 Python
Python3常见函数range()用法详解
2019/12/30 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
python函数超时自动退出的实操方法
2020/12/28 Python
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
秋季运动会表扬稿
2014/01/16 职场文书
入党积极分子介绍信
2014/01/17 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
《菜园里》教学反思
2014/04/17 职场文书
高中教师个人工作总结
2015/02/10 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB