使用6to5，讓今天就來寫ES6的模塊化開發！

時間 2019-11-05

標籤使用 6to5 今天來寫 es6 模塊化開發欄目 JavaScript 简体版

原文原文鏈接

http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium=email 原文連接javascript

我以前在Twitter上發過一個照片。表達出我有多快樂，這像是一個時光機讓咱們可以穿梭到將來-ES6的時代！html

如下讓我來展現怎樣使用6to5讓今天就可以練手ES6的模塊化。java

使用6to5讓今天就可以練手ES6的模塊化

第一步

假設你現在還不瞭解ES6的模塊化開發，請在JSModules.io上了解一下。我也推薦你們讀一下@jcemer的文章A new syntax for modules in ES6，它涉及到了很是多很是酷的關於JS模塊化的東西。他可以指導咱們使用6to5。總的來講，6to5能在支持ES5d的環境下提早嘗試ES6 模塊化開發的快感。 6to5比其它降級工具備一下幾個優點： * 可讀性：你的格式化的代碼儘量的保留。 * 可擴展性：有很龐大的插件庫和瀏覽器的支持。 * 可調式性：因爲支持source map，你可以方便的調試已經編譯事後的代碼 * 高效率：直接轉化爲與ES至關的代碼，不會添加額外的執行十幾node

一塊兒來寫模塊

讓咱們來嘗試着寫模塊吧！git

咱們的應用除了輸出日誌不會作其它事情，其基本的目的就是讓你瞭解模塊化怎樣工做和怎樣讓你現有的環境使用ES6的模塊化開發。基本的文件夾結構：es6

├── Gruntfile.js
├── package.json
└── src
    ├── app.js
    ├── modules
    │   ├── bar.js
    │   ├── baz.js
    │   └── foo.js
    └── sample
        └── index.html

app.js是主程序，包括了咱們將要存儲的模塊化的文件夾如下是app.js的代碼：github

import foo from "./modules/foo";
import bar from "./modules/bar";

console.log('From module foo >>> ', foo);
console.log('From module bar >>> ', bar);

以上代碼很easy，咱們導入了foo模塊和bar模塊，而後分別打印出他們npm

// foo.js
let foo = 'foo';

export default foo;


// bar.js
let bar = 'bar';

export default bar;

在這些模塊一面咱們僅僅是導出了兩個字符串’foo’和’bar’，當咱們導入這些模塊。咱們的變量事實上已經有數據。固然，咱們何以導出對象，類，函數。等等現在。你可以開始模仿這個樣例寫出你本身的模塊json

構建

就像你已經知道的，ES6不支持你現在的瀏覽器和Node.js，僅僅有一條路。那就是使用降級轉換器來編寫ES6的模塊化代碼。瀏覽器

正如我以前提到的那個。我使用6to5。他可以精確的達到咱們想要的效果。這個任務是執行在Grunt上的,咱們使用 @sindresorhus的 grunt-6to5

npm install grunt-cli -g
npm install grunt --save-dev
npm install grunt-6to5 --save-dev

咱們的Gruntfile相似於一下：

grunt.initConfig({
    '6to5': {
        options: {
            modules: 'common'
        },

        build: {
            files: [{
                expand: true,
                cwd: 'src/',
                src: ['**/*.js'],
                dest: 'dist/',
            }],
        }
    }
});

To test it in the browser, I made a copy task that just copies the sample/index.html file to our dist directory. The HTML file looks like this:

這是個簡單又給力的配置，咱們也差點兒完畢了。

當你指定好源文件和輸出文件後，這個任務就可以來執行了。 ‘common’選項的目的在於告訴6to5咱們將輸出ES5CommonJS模塊化風格。固然，6to5也支持AMD，我寫了sample/index.html，讓他在瀏覽器環境下測試一下，這個HTML的代碼例如如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6 modules 6to5</title>
</head>
<body>
    <script src="//[cdnjs URL]/require.min.js"></script>
    <script>
        require(['app.js']);
    </script>
</body>
</html>