Clever Geek Handbook

如何在任何浏览器中使用最新的JavaScript功能

图片



JavaScript是一种发展迅速的语言，有时我们想使用它的最新功能，但是如果我们的浏览器或环境不允许直接使用它，则必须对其进行转换才能这样做。



翻译是将一种语言编写的源代码转换为具有相当抽象级别的另一种语言的方法。因此，在使用JavaScript的情况下，编译器采用了旧版浏览器无法理解的语法，并将其转换为他们可以理解的语法。



灌装vs. 转堆



两种方法都出于相同的目的：我们可以编写使用目标环境中未实现的新功能的代码，然后应用其中一种方法。



polyfill是实现现代功能的一段代码，因此可以将其应用到旧版本的浏览器中。



转译是两个词的组合：转换-转换和编译

-编译。有时，新的语法无法使用polyfill来实现，在这种情况下，我们将使用转译器。



假设我们正在使用一个不支持Number.isNaN函数的旧浏览器在ES6规范中引入。要使用此功能，我们需要为此方法创建一个polyfill，但是只有在浏览器中尚不可用时才需要它。



为此，我们将创建一个模仿isNaN函数行为的函数，并将其添加到原型的Number属性中。 



//  isNaN
if (!Number.isNan) {//  .
    Number.prototype.isNaN = function isNaN(n) {
        return n !== n;
    };
}
let myNumber = 100;
console.log(myNumber.isNaN(100));


现在，我们将为新创建的函数转换代码。让我们想象一下，大多数浏览器无法实现此功能，在这种情况下，我们无法创建polyfill来模拟行为。我们想在Internet Explorer 11中运行以下代码，因此我们将使用翻译器对其进行转换： 



class mySuperClass {
  constructor(name) {
    this.name = name;
  }
hello() {
    return "Hello:" +this.name;
  }
}
const mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello()); 
//Hello Rick


生成的代码已使用Babel的在线transpiler进行了移植，我们现在可以在Internet Explorer 11中执行它： 



"use strict";
function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }
function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var mySuperClass = /*#__PURE__*/function () {
  function mySuperClass(name) {
    _classCallCheck(this, mySuperClass);
this.name = name;
  }
_createClass(mySuperClass, [{
    key: "hello",
    value: function hello() {
      return "Hello:" + this.name;
    }
  }]);
return mySuperClass;
}();
var mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello()); //Hello Rick


Babel是最常见的JavaScript编译器之一。 Babel是一个旨在帮助您在不同版本的JavaScript之间移植代码的工具，可以通过Node Package Manager（npm）进行安装。



Babel已成为将ECMAScript应用程序编译为ECMAScript版本的标准，该版本可在不支持此类应用程序的浏览器中使用。 Babel可以编译其他版本的ECMAScript，例如React JSX。



在接下来的步骤中，我们将看到如何在安装了旧Node.js的Linux机器上使用Babel来转换和执行先前的mySuperMethod类。在其他操作系统上，例如Windows 10或macOS，步骤类似。



注意。您必须Node.js的计算机上安装。Npm已作为功能添加到Node.js安装程序



1。打开命令提示符并创建一个名为babelExample的目录： 



/mkdir babelExample
/cd babelExample


2.创建一个npm项目并保留默认值。以下命令将创建一个名为package.json的文件： 



npm init


图片

npm init命令执行后package.json文件内容的屏幕快照



这里的index.js（文件名可能不同）是我们应用程序的入口。这是我们要放置JavaScript代码的地方，因此创建一个index.js文件并将以下代码放入其中： 



class mySuperClass {
  constructor(name) {
    this.name = name;
  }
hello() {
    return "Hello:" +this.name;
  }
}
const mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello()); 
//Hello Rick


3.虽然我们可以在全球范围内安装Babel CLI，但是最好在本地逐个项目地安装。以下命令将添加node_modules目录并修改package.json文件以添加Babel依赖项： 



npm install -save-dev @babel/core @babel/cli


图片

带有babel依赖项的package.json的屏幕快照



4.将配置文件.babelrc添加到项目根目录，并包括ES2015 +转换的插件。



注意。在Babel中，每个转换器都是一个我们可以单独安装的插件。每个预设都是相关插件的集合。使用预设，我们不需要自己安装和更新数十个插件。



为所有ES6功能设置一个预设（包含一组插件）： 



npm install @babel/preset-env --save-dev


图片

具有babel预设



-env依赖性的package.json的屏幕快照编辑.babelrc文件并添加包含ES6转换的配置。



将以下代码写入您的.babelrc文件： 



{
  "presets": ["@babel/preset-env"]
}


5.使用



说明。如果您使用的是Windows 10 PowerShell，请谨慎编码，因为在启动Babel时会出现解析错误。希望文件采用UTF-8编码。



输入：index.js

输出：out文件夹（Babel会将迁移的文件留在此处）



直接在控制台中运行以下命令： 



./node_modules/.bin/babel index.js -d out


使用npm脚本，将以下行添加到package.json文件： 



"build": "babel index.js -d out"


图片

添加构建脚本后package.json文件内容的屏幕快照



运行以下命令： 



npm run build


在这两种情况下，您都在out文件夹中获得一个或多个文件，这些文件被转换为不支持ES6类语法的即用型浏览器，代码为： 



"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var mySuperClass = /*#__PURE__*/function () {
  function mySuperClass(name) {
    _classCallCheck(this, mySuperClass);
this.name = name;
  }
_createClass(mySuperClass, [{
    key: "hello",
    value: function hello() {
      return "Hello:" + this.name;
    }
  }]);
return mySuperClass;
}();
var mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello());


结论



JavaScript语言在不断变化，由于有了这些工具，我们可以使用尚未在所有版本的浏览器中实现的新语法和新功能来编写代码。



希望您喜欢这篇文章。我在Frontend.school（）电报频道上向初学者Frontend开发人员广播了这篇文章以及许多其他有用的文章，在这里我还准备了一些有用的测验以测试我的知识。我提请您注意以下事实：该渠道纯粹是一种爱好，是一种帮助的愿望，不会给我带来实质性的好处。


More articles:


All Articles