程式猿日常

2019/2/26

import、require、export、module.exports使用詳解

webpack本身維護一套模組系統，這套模組系統相容了前端歷史程式下的模組規範，包括amd,commonjs,es6等，本文主要針對 commonjs和es6規範進行說明。模組化的實現其實就是在最後編譯的檔案內。自執行函式：

(function(modules){  
    
})([])
複製程式碼

自執行函式的入參是個陣列，這個陣列包含了所有的模組，自執行函式體裡的邏輯就是處理模組的邏輯。

babel專門用於處理es6轉換為es5，當然也包括es6模組語法的轉換。
babel和webpack的轉換思路差不多，區別在於webpack的原生轉換可以多做一步靜態，分析，使用tree-shaking技術 babel能提前將es6的import等模組關鍵字轉換為commonjs的規範。

es6的匯出模組方法有：
 export default 123;
 export const a = 1;
 const b = 2;
 const c = 3;
 export {b, c};
複製程式碼

babel會將這些統統轉換為commonjs的exprots。

exports.default = 123;
exports.a = 1;
exports.b = 2;
exports.c = 3;
exports._esModule = true;
複製程式碼

babel將模組匯出的邏輯非常簡單，將所有的輸出都賦值exports，並帶上一個_esModule表明這個由es6轉換來的commonjs輸出。
對於最常見的

import a from './a.js'
複製程式碼

在es6中這個行程式碼的本意是想去引入一個es6模組中的default輸出。

修改Element-ui原始碼自動重新整理配置方法：

import ElementUI from './../node_modules/element-ui/src/index.js';  
webpack.base.config.js檔案修改babel-loader配置新增：
resolve('node_modules/element-ui')
"transform-vue-jsx",
"transform-es2015-modules-commonjs"都加上字首babel-plugin-
複製程式碼

css BFC IFC GFC FFC
css 常用的核心技巧
css 矩陣 css 3d
css 與數學魅力
css前處理器和後處理器
css效能問題重繪重排動畫硬體加速
css 與黑客安全跨站指令碼攻擊
psd houdini

前端分圖形化和架構師兩個大方向
nodejs要學習的重點

log4js
jmeter + js
PM2
Nginx配置
proxy io
promise
express koa2

程式猿日常

2019/2/26

相關文章