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多种数据类型表格排序代码分析
Sep 11 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
基于redis的小程序登录实现方法流程分析
May 25 Javascript
javascript的var与let,const之间的区别详解
Feb 18 Javascript
正则表达式基础与常用验证表达式
Jun 16 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
推荐十款免费 WordPress 插件
2015/03/24 PHP
PHP加密解密类实例代码
2016/07/20 PHP
javascript concat数组累加 示例
2009/09/03 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
python实现类之间的方法互相调用
2018/04/29 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
python__new__内置静态方法使用解析
2020/01/07 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
运动会邀请函范文
2014/01/31 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
宣传普通话标语
2014/06/27 职场文书
安全生产年活动总结
2014/08/29 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers