天天看點

前端子產品化開發

目錄

CommonJS規範

ES6子產品化規範

ES6子產品化寫法2

CommonJS使用 exports 和require 來導出、導入子產品

每個檔案就是一個子產品,有自己的作用域。在一個檔案裡面定義的變量、函數、類,都是私有的對其他檔案不可見。

建立“module”檔案夾

建立 mokuai-common-js/四則運算.js

導出子產品中的成員

建立 mokuai-common-js/引入子產品.js

運作程式

前端子產品化開發

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

建立 mokuai-es6 檔案夾

建立 src/userApi.js 檔案,導出子產品

建立 src/userComponent.js檔案,導入子產品

注意:這時的程式無法運作的,因為ES6的子產品化無法在Node.js中執行,需要用Babel編輯成ES5

後再執行

初始化項目

配置 .babelrc

安裝轉碼器,在項目中安裝

定義運作腳本,package.json中增加"build"

前端子產品化開發

執行指令轉碼

前端子產品化開發
前端子產品化開發

建立 src/userApi2.js ,導出子產品

建立 src/userComponent2.js,導入子產品