瀏覽器目前還不支持ES6模塊,為了實現立刻使用,我們可以將其轉為ES5的寫法.除了Babel可以用來轉碼,還有以下兩個方法也可以用來轉碼:

ES6 moudule transpiler

SystemJS

ES6 moudule transpiler是square公司開源的一個轉碼器,可以將ES6模塊轉為CommonJS模塊或AMD模塊,從而在瀏覽器中使用.

首先，安裝這個解碼器.
$ npm install -g es6-module-transpiler
然后,使用compile-modules convert 命令將ES6模塊文件轉碼
$ compile-modules convert filel.js file2.js
-o 參數可以指定轉碼后的文件名.
$ compile-modules convert -o out.js file1.js

第二種解決方法使用了SystemJS。它是一個墊片庫(polyfill),可以在瀏覽器內加載ES6模塊、AMD模塊和ConmmonJS模塊,將其轉化為ES5格式。它在后臺調用的是Google的Traceur轉碼器.

使用時,先在網頁內載入system.js文件。
<script src=“system.js”> </script>
然后,使用System.import方法加載模塊文件。
<script>
System.import(’./app.js’);
</script>
上面的代碼中的./app指的是當前目錄下的app.js文件。它可以是ES6模塊文件,System.import會自動將其轉碼。
需要注意的是，System.import使用異步加載，返回一個Promise對象，可以針對這個對象編程。下面是一個模塊文件。
// app/es6-file.js:>
需要注意的是，System.import使用異步加載，返回一個Promise對象，可以針對這個對象編程。下面是一個模塊文件。
// app-es6-file.js:
export class q{
constructor() {
this.es6 = ‘hello’;
}
}
然后，在頁面內加載這個模塊文件。
<script>
System.import(‘app/es6-file’).then(function(m){console.log(new m.q().es6;)}) //hello

總結

以上是生活随笔為你收集整理的ES6模块的转码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。