【JavaScript 子產品化程式設計】CommonJS 子產品化規範，ES6 子產品化規範 導出導入與轉碼

文章目錄

• 一、CommonJS 子產品化規範
• 二、ES6 子產品化規範

• 1、導出導入

• （1）依次導出導入
• （2）一次導出導入

• 2、轉碼

一、CommonJS 子產品化規範

每個檔案就是一個子產品。CommonJS規範規定，每個子產品内部，module變量代表目前子產品。這個變量是一個對象，它的exports屬性（即module.exports）是對外的接口。加載某個子產品，其實是加載該子產品的module.exports屬性。

導出：module.exports

導入：require

附加：一篇前輩的文章

二、ES6 子產品化規範

ES6使用 export 和 import 來導出、導入子產品。

導出：export，export default

導入：import

1、導出導入

（1）依次導出導入

導出

導入

（2）一次導出導入

導出

導入

2、轉碼

報錯，因為預設是不支援 ES6 文法的

需要用 Babel 來處理，使文法從 ES6 轉換為 ES5

是以執行以下步驟：

1、初始化為 Node.js 項目

2、配置 .babelrc 檔案

{
  "presets": ["es2015"],
  "plugins": []
}      

3、安裝轉碼器（作為 ES6 新文法到 ES5 文法的映射表），在項目中安裝

cnpm install --save-dev babel-preset-es2015      

4、自定義腳本，修改 package.json 檔案中的 scripts 标簽

5、執行上述自定義的 build

6、執行轉碼後的 js 檔案