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 相关文章推荐
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
jquery实现轮播图效果
Feb 13 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
如何实现小程序tab栏下划线动画效果
May 18 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面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
浅谈php自定义错误日志
2015/02/13 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
利用Python实现命令行版的火车票查看器
2016/08/05 Python
python中map()函数的使用方法示例
2017/09/29 Python
python http基本验证方法
2018/12/26 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
是否有自动比较结构的方法
2015/06/03 面试题
毕业生个人的求职信范文
2013/12/03 职场文书
《石榴》教学反思
2014/03/02 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
三爱活动实施方案
2014/03/19 职场文书
网络营销计划书
2015/01/17 职场文书
丧事答谢词大全
2015/09/30 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
《正比例》教学反思
2016/02/23 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript