AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍(上)

2016-08-13 12658
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： ## 起因 某天，某测试说：“这个页面在 IE8 下白屏，9也白。。” 某前端开发: 吭哧吭哧。。。一上午的时间就过去了，搞定了。 第二天，某测试说：“IE 又白了。。” 某前端开发: 吭哧吭哧。。。谁用的 `Object.assign`，出来我保证削不屎你。 ![](https://gw.alicdn.com/tfscom/TB1AR1.LXXXXXaNXpXXXXXX

起因

某天，某测试说：“这个页面在 IE8 下白屏，9也白。。”

某前端开发: 吭哧吭哧。。。一上午的时间就过去了，搞定了。

第二天，某测试说：“IE 又白了。。”

某前端开发: 吭哧吭哧。。。谁用的 Object.assign，出来我保证削不屎你。

原谅我不禁又黑了一把 IE。

有人可能会想，都要淘汰了，还有什么好讲的？

也许几年后，确实没用了，但目前我们的系统还是要对 ie8+ 做兼容，因为确实还有个别用户，尽管他没朋友。。。

记录下本次在 IE 下踩得坑，让后面的同学能够不再在这上面浪费时间了。

经过

测试

首先，看下面代码(以下测试在 IE9)

class Test extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <div>{this.props.content}</div>;
  }
}

module.exports = Test;

这段代码跑的妥妥的，没什么问题。

一般来说，babel 在转换继承时，可能会出现兼容问题，那么，再看这一段

class Test extends React.Component {
  constructor(props) {
    super(props);
  }
  test() {
      console.log('test');
  }
  render() {
    return <div>{this.props.content}</div>;
  }
}

Test.defaultProps = {
  content: "测试"
};

class Test2 extends Test {
  constructor(props) {
    super(props);
    this.test();
  }
}

Test2.displayName = 'Test2';

module.exports = Test2;

这段代码同样也可以正常运行

也就是说在上述这两种情况下，不做任何处理（前提是已经加载了 es5-shim/es5-sham），在 IE9 下都可以正常运行。

然后我们再看下会跑挂的代码

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      test: 1,
    };
  }
  test() {
      console.log(this.state.value);
  }
  render() {
    return <div>{this.props.content}</div>;
  }
}

Test.defaultProps = {
  content: "测试"
};

class Test2 extends Test {
  constructor(props) {
    super(props);
    // SCRIPT5007: 无法获取属性 "value" 的值，对象为 null 或未定义
    this.test();
    
    // SCRIPT5007: 无法获取属性 "b" 的值，对象为 null 或未定义
    this.a = this.props.b;
  }
}
// undefined
console.log(Test2.defaultProps);

Test2.displayName = 'Test2';

module.exports = Test2;

这段代码在高级浏览器中是没问题的，在 IE9 中会出现注释所描述的问题

从这些问题分析，可得出3个结论

  1. 在构造函数里的定义的属性无法被继承
  2. 在构造函数里不能使用 this.props.xx
  3. 类属性或方法是无法被继承的

也就是说，只要规避了这三个条件的话，不做任何处理（前提是已经加载了 es5-shim/es5-sham），在 IE9 下都可以正常运行。

第二点，是完全可以避免的，切记在 constructor 直接使用 props.xxx, 不要再用 this.props.xxx

第三点，也是可以完全避免的，因为从理论上来说，类属性就不该被继承，如果想使用父类的类属性可以直接Test2.defaultProps = Test.defaultProps;

第一点，可避免，但无法完全避免

原因

第一点，有时是无法完全避免的，那么就要查询原因，才能找到解决方案

我们把 babel 转义后的代码放出来就能查出原因了

'use strict';

var _createClass = function () {
  ...
}();

function _classCallCheck(instance, Constructor) { 
  ...
}

function _possibleConstructorReturn(self, call) { 
  ...
  // 这个方法只是做了下判断，返回第一个或第二参数
  return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { 
  ...; 
  // 这里的 _inherits 是通过将子类的原型[[prototype]]指向了父类，所以如果在高级浏览器下，子类的可以继承到类属性
  // 根本问题也是出在这里，IE9 下既没有 `setPrototypeOf` 也没有 `__proto__`
  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 
}

var Test = function (_React$Component) {
  ...
  return Test;
}(React.Component);

Test.defaultProps = {
  content: "测试"
};

var Test2 = function (_Test) {
  _inherits(Test2, _Test);

  function Test2(props) {
    _classCallCheck(this, Test2);
     // 这里的 this 会通过 _possibleConstructorReturn，来获取父类构造函数里定义的属性
     // _possibleConstructorReturn 只是做了下判断，如果第二个参数得到了正确执行，则返回执行结果，否则返回第一个参数，也就是子类的 this
     // 也就是说问题出在 Object.getPrototypeOf 
     // 在 _inherits 中将子类的原型指向了父类， 这里通过 getPrototypeOf 来获取父类，其实就是 _Test
     // Object.getPrototypeOf 不能正确的执行，导致了子类无法继承到在构造函数里定义的属性或方法，也无法继承到类属性或方法
    var _this2 = _possibleConstructorReturn(this, Object.getPrototypeOf(Test2).call(this, props));

    _this2.test();
    console.log(_this2.props.children);
    return _this2;
  }

  return Test2;
}(Test);

console.log(Test2.defaultProps);

Test2.displayName = 'Test';

module.exports = Test2;

通过上述的代码注释，可以得出有两处问题需要解决

  1. 正确的获取父类（解决无法继承到在构造函数里定义的属性或方法）
  2. 正确的将子类的原型指向了父类（解决无法继承到类属性或方法）

解决方案

通过文档的查询，发现只要开启 es2015-classes 的 loose 模式即可解决第一个问题

loose 模式

Babel have two modes:

  • A normal mode follows the semantics of ECMAScript 6 as closely as possible.
  • A loose mode produces simpler ES5 code.

Babel 有两种模式：

  • 尽可能符合 ES6 语义的 normal 模式。
  • 提供更简单 ES5 代码的 loose 模式。

尽管官方是更推荐使用 normal 模式，但为了兼容 IE，我们目前也只能开启 loose 模式。

在 babel6 中，主要是通过 babel-preset-2015 这个插件，来进行转义的
我们看下 babel-preset-2015

 plugins: [
    require("babel-plugin-transform-es2015-template-literals"),
    require("babel-plugin-transform-es2015-literals"),
    require("babel-plugin-transform-es2015-function-name"),
    ...
    require("babel-plugin-transform-es2015-classes"),
    ...
    require("babel-plugin-transform-es2015-typeof-symbol"),
    require("babel-plugin-transform-es2015-modules-commonjs"),
    [require("babel-plugin-transform-regenerator"), { async: false, asyncGenerators: false }],
  ]

是一堆对应转义的插件，从命名上也可看出了大概，比如 babel-plugin-transform-es2015-classes 就是做类的转义的，也就是我们只需把它开启 loose 模式，即可解决我们的一个问题

[require('babel-plugin-transform-es2015-classes'), {loose: true}],

看下开启了 loose 模式的代码，你会发现它的确更接近 ES5

var Test = function (_React$Component) {
  ...
  // 这里是 ES5 的写法
  Test.prototype.test = function test() {
    console.log(this.state.value);
  };
  /* normal 模式是这样的
  {
    key: 'test',
    value: function test() {
      console.log(this.state.value);
    }
  }
  */
  return Test;
}(React.Component);

var Test2 = function (_Test) {
  _inherits(Test2, _Test);

  function Test2(props) {
    _classCallCheck(this, Test2);
    // 这里直接拿到了父类 _Test, 即解决了无法继承到在构造函数里定义的属性或方法
    var _this2 = _possibleConstructorReturn(this, _Test.call(this, props));

    _this2.test();
    return _this2;
  }

  return Test2;
}(Test);

我们可以通过去安装 babel-preset-es2015-loose, 这个插件来开启 loose 模式。

但从我们团队的 老司机 口中

image

得到了一个更好插件babel-preset-es2015-ie，看下这个插件的代码，发现它和原来的 babel-preset-2015 只有两行区别

[
  [require('babel-plugin-transform-es2015-classes'), {loose: true}],
  require('babel-plugin-transform-proto-to-assign'),
]

刚好解决我们上述碰到的两个问题

这个 babel-plugin-transform-proto-to-assign 插件会生成一个 _defaults 方法来处理原型

function _inherits(subClass, superClass) { 
  ...; 
  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass);
}
function _defaults(obj, defaults) {
 var keys = Object.getOwnPropertyNames(defaults);
  for (var i = 0; i < keys.length; i++) {
   var key = keys[i]; 
   var value = Object.getOwnPropertyDescriptor(defaults, key);
    if (value && value.configurable && obj[key] === undefined) {
     Object.defineProperty(obj, key, value); 
     } 
   }
  return obj;
}

这个插件正确的将子类的原型指向了父类（解决无法继承到类属性或方法）

总结

本文讲述低版本浏览器报错的原因和解决方案

  • 一方面是提示下在构造函数里不要使用 this.props.xx
  • 另一方面也对继承的机制有了更好的理解

在这次项目中发现在低版本浏览器跑不起来的两点主要原因：

  1. SCRIPT5007: 无法获取属性 xxx 的值，对象为 null 或未定义，这种情况一般是组件继承后，无法继承到在构造函数里定义的属性或方法，同样类属性或方法也同样无法继承
  2. SCRIPT438: 对象不支持 xxx 属性或方法，这种情况一般是使用了 es6、es7 的高级语法，Object.assgin Object.keys 等，这种情况在移动端的一些 ‘神机’ 也一样会挂。

第一点本文已经分析，预知第二点讲解请见下篇。

备注：下篇会主要介绍下如何让 用了 Object.assign 的那位同学可以继续用，又不会被削。

文章标签：
前端开发
JavaScript
关键词：
Webpack babel
Webpack React
webpack React Native
es6 Webpack
React Native es6
风凌雪
目录
相关文章
土木林森
|
27天前
|
缓存 前端开发 JavaScript
前端性能优化：Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中，Webpack和Babel是不可或缺的工具，分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略，包括Webpack的代码压缩、缓存优化和代码分割，以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化，可以显著提升应用的加载速度和运行效率，从而改善用户体验。
土木林森
42 6
游客zi3qmblbcdexu
|
1月前
|
前端开发 JavaScript
手敲Webpack 5：React + TypeScript项目脚手架搭建实践
手敲Webpack 5：React + TypeScript项目脚手架搭建实践
游客zi3qmblbcdexu
40 6
我是快乐的嘟嘟
|
2月前
|
前端开发 JavaScript
ES6模块化和webpack打包
【10月更文挑战第5天】
我是快乐的嘟嘟
53 9
朝阳39
|
5月前
|
前端开发 JavaScript
webpack 和 babel 实用教程【前端必备】
webpack 和 babel 实用教程【前端必备】
朝阳39
51 0
小蜗牛耶
|
JavaScript 前端开发 数据库
前端常见知识点汇总(ES6，Vue，axios，Node.js，npm，webpack)-3
前端常见知识点汇总(ES6，Vue，axios，Node.js，npm，webpack)
小蜗牛耶
108 0
Boale_H
|
7月前
|
前端开发 JavaScript 容器
前端vw自适应解决方案，适用pc端以及移动端，适用webpack以及vite，适用vue以及react
前端vw自适应解决方案，适用pc端以及移动端，适用webpack以及vite，适用vue以及react
Boale_H
426 0
阿珊和她的猫
|
7月前
|
自然语言处理 JavaScript 前端开发
拯救浏览器兼容性：Babel是前端开发的必备神器（一）
拯救浏览器兼容性：Babel是前端开发的必备神器
阿珊和她的猫
312 0
憧憬blog
|
7月前
|
编解码 资源调度 前端开发
Webpack+Babel手把手带你搭建开发环境(内附配置文件)
Webpack+Babel手把手带你搭建开发环境(内附配置文件)
憧憬blog
91 0
前端技术栈
|
7月前
|
资源调度 前端开发 JavaScript
vue - ES6模块化、promise、webpack打包（所在在学的朋友们先看这篇，看了不吃亏）...
vue - ES6模块化、promise、webpack打包（所在在学的朋友们先看这篇，看了不吃亏）...
前端技术栈
67 0
wei_shuo
|
7月前
|
编解码 JavaScript 前端开发
Node.JS学习 | Babel | webpack | ES6
Node.JS学习 | Babel | webpack | ES6
wei_shuo
80 0

热门文章

最新文章

  • 1
    【前端异常】vscode：无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称，Cannot find module ”webpack“
  • 2
    webpack window 使用sass来编译css样式
  • 3
    vue之webpack打包原理和用法详解
  • 4
    wp2vite的妙用，让webpack项目支持vite
  • 5
    2.2.3 使用webpack loader
  • 6
    UniApp 解决 Error: Cannot find module ‘webpack/lib/RuleSet‘
  • 7
    你真的理解 Webpack？请回答下列问题
  • 8
    webpack指南-webpack介绍-代码分割 - CSS
  • 9
    《Webpack5 核心原理与应用实践》学习笔记-> 构建npm包
  • 10
    webpack编写一个插件
  • 1
    实用的chrome浏览器命令
    71
  • 2
    jeecgboot开发环境服务启动刷新没问题，部署到tomcat，F5刷新或者浏览器刷新，会出现404
    208
  • 3
    控制浏览器发送请求采用请求方式的详细介绍
    113
  • 4
    使用PHPStudy搭建本地web网站并实现任意浏览器公网访问
    309
  • 5
    edge浏览器内存不足
    74
  • 6
    XML DOM 浏览器差异
    58
  • 7
    实用的Chrome浏览器命令
    230
  • 8
    javascript监听浏览器离开、进入行为
    167
  • 9
    浏览器兼容性解决方案
    61
  • 10
    JavaScript基础入门之浏览器控制台调试输出
    108

    • 相关课程

    更多
  • 前端自动化构建工具 Webpack
  • React 入门与实战
  • React 入门教程开发文档
  • Vue.js完全自学手册图文教程
  • Vue.js 入门与实战
  • Node.js 入门教程文档

    • 相关电子书

    更多
  • 基于webpack和npm的前端组件化实践
  • 基于浏览器的实时构建探索之路
  • 基于浏览器的实时构建探索之路--玄寂

    • 相关实验场景

    更多
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础6：Node.js和LESS预编译工具
  • WEB网页编程实战
  • Web Terminal环境使用指南
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月