瀏覽器支持ES6的最優解決方案

ES6系列的興起

能夠說ECMAScript6是JavaScript歷史上最大的一次變革，ES6的到來爲JavaScrip帶來了面向對象的特性，帶來了許多新的語法，也讓這門解釋性語言有了它該有的樣子。總的來講，帶來了無限好處。帶來好處的同時也讓咱們在用的時候有了擔心，用戶的角度是廣闊的，開發者沒法提早預知用戶用的瀏覽器到底支持不支持ES6的語法，所以在開發過程當中就有個阻礙。babel的興起讓ES6的開發者大顯身手，可是它是把ES6的語法編譯成ES5的語法，也就是瀏覽器支持的語法。咱們要知道在ES6興起的時候，V8引擎是對ES6語法有了極大的優化的，濫用了babel不就也放棄了這種優化嗎？這使得ES6只讓開發者更加便於開發，用戶的角度上並無體現出任何價值，並且babel編譯出的龐大的ES5文件，在用戶方法還起到了負面做用。那這到底怎麼辦呢？接下來主角登場。

最優的解決方案

emmmm...主角登場前，電閃雷鳴，烏雲密佈。當咱們在開發過程當中的時候，JavaScript採用兩種文件的方式來加載。一種的ES6代碼寫的文件，一種的babel編譯成ES5的文件。在瀏覽器中執行的時候，判斷瀏覽器是否支持ES6，若是支持就加載ES6的文件，若是不支持就加載ES5的文件，這樣就良好的解決問題。那麼用什麼判斷呢？主角登場。。。。

type='module'

在script標籤裏面咱們都知道有type屬性指定文件的類型(type='text/script')，這個屬性還有一個值那就是module和nomodule。

1. module：表示當瀏覽器支持ES6的時候執行的JavaScript代碼
2. nomodule：表示當瀏覽器不支持ES6的時候執行的JavaScript代碼。

咱們在項目中建立test.js文件來寫這樣一段代碼：當咱們在寫好ES6的代碼的時候不要直接調用，阮大佬的import，用ES6 import export的形式導出

class Test {
    constructor(){
        this.name = 'zhangsan';
    }
    action(){
        console.log(this.name);
    }
}
export default Test;
複製代碼

在html中：使用ES6的動態import的形式加載進來。

<script type='module'> import('test.js').then(_=>{ console.log('我支持modul'); new _.default().action(); }) </script>
複製代碼

打開Chrom瀏覽器會發現有這樣的一句輸出

type=‘nomodule’的狀況下咱們執行babel編譯

使用babel編譯

安裝babel

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

在項目根目錄建立.babelrc文件,內容以下

{
    "presets" : ["@babel/preset-env"]
}
複製代碼

使用命令進行編譯

babel test.js --out-file test-bundle.js

test-bundle.js文件內容以下：

"use strict";
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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 Test =
/*#__PURE__*/
function () {
  function Test() {
    _classCallCheck(this, Test);

    this.name = 'zhangsan';
  }

  _createClass(Test, [{
    key: "action",
    value: function action() {
      console.log(this.name);
    }
  }]);

  return Test;
}();

var _default = Test;
exports.default = _default;

複製代碼

咱們發現第二行使用的是模塊加載export，require之類的東西，可是咱們瀏覽器中並無這些東西，因而咱們採用一個模塊加載器來加載這個東西。

System.js

System.js是一個萬能模塊加載器，任何使用模塊加載的均可以使用它來進行加載。用法也很是簡單。Systemjs的github。咱們採用script標籤的形式把這個東西加載進來。並用官網的方式加載test.js

須要注意的是：Systemjs必須指定nomodule，和ES5文件保持一致才能夠。因爲咱們用於測試和最新的Chrome瀏覽器確定是支持module的，因此先把nomodule改爲module來用於測試

<!--<script type="nomodule" src="https://cdn.staticfile.org/systemjs/3.0.0/system.js"></script> <script type="nomodule"> System.import('test.js').then(_=>{ new _.default().action(); }) </script>-->
 
 <script type="module" src="https://cdn.staticfile.org/systemjs/3.0.0/system.js"></script>
 <script type="module"> System.import('test.js').then(_=>{ new _.default().action(); }) </script>
複製代碼

打開瀏覽器見證奇蹟

哎呀報錯了，很懵逼，很焦慮，爲何會報錯呢？ 由於babel編譯的es5的語法採用的模塊加載器是export加載，並無使用SystemJS的加載方式。能夠經過babel插件來把babel的模塊加載方式改爲SystemJS的加載方式。

最後的但願

咱們在npm上找到這個插件@babel/plugin-transform-modules-systemjs並安裝

npm install @babel/plugin-transform-modules-systemjs --sav-dev

在.babelrc裏面添加上plugins

{
    "presets" : ["@babel/preset-env"],
    "plugins" : ["@babel/plugin-transform-modules-systemjs"]
}
複製代碼

此時使用上面babel語法進行編譯，文件內容以下

"use strict";
System.register([], function (_export, _context) {
 "use strict";

  var Test;

  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; }

  return {
    setters: [],
    execute: function () {
      Test =
      /*#__PURE__*/
      function () {
        function Test() {
          _classCallCheck(this, Test);

          this.name = 'zhangsan';
        }

        _createClass(Test, [{
          key: "action",
          value: function action() {
            console.log(this.name);
          }
        }]);

        return Test;
      }();

      _export("default", Test);
    }
  };
});
複製代碼

第二行咱們發現有這樣一個東西System.register([], function (_export, _context)，與以前的編譯不同了。此時就是使用SystemJS的模塊加載機制。咱們打開瀏覽器。

完美。

在使用type=‘module’和和type=‘nomodule’的時候，必定要把SystemJS的type設置成nomodule，與ES5語法統一。

---

原文發表於瀏覽器支持ES6的最優解決方案