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 Date对象 日期获取函数
Dec 19 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
Nov 26 Javascript
javascript事件模型实例分析
Jan 30 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
jQuery实现微信长按识别二维码功能
Aug 26 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
使用socket.io实现简单聊天室案例
Jan 02 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
Element中Slider滑块的具体使用
Jul 29 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 Javascript
关于Js中new操作符的作用详解
Feb 21 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中header的用法详解
2013/06/07 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
Array.prototype.slice 使用扩展
2010/06/09 Javascript
分页栏的web标准实现
2011/11/01 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
详解Python中第三方库Faker
2020/09/25 Python
python 实现Harris角点检测算法
2020/12/11 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
服装设计专业毕业生推荐信
2013/11/09 职场文书
甲方资料员岗位职责
2013/12/13 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
个人批评与自我批评
2014/10/15 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
质量整改通知单
2015/04/21 职场文书
Python中Permission denied的解决方案
2021/04/02 Python
Django drf请求模块源码解析
2021/06/08 Python