前端開發離不開模塊化，與模塊化有關的關鍵字有以下幾個：

• require/module.exports

• export/import

• define/require/exprots

• define/seajs.use

這涉及到4種模塊化規范：AMD、CMD、CommonJS、ES6。

AngularJS

AngularJS模塊化使用的并不是標準的AMD規范，AngularJS的風格風格大致是這樣的：

不僅模塊的定義和引入麻煩，與Html標簽耦合也較嚴重，閱讀吃力，擴展與復用麻煩。AngularJS的模塊化風格還停留在代碼層面。

后來出現了AMD規范。

AMD

AMD規范使用統一的define、require做為偽關鍵字。模塊化定義是這樣的：

// a.js
define(["b", "require", "exports"], function(b, require, exports) {
console.log("a.js執行");
console.log(b);
// 暴露api可以使用exports、module.exports、return
exports.a = function() {
return require("b");
}
})
// b.js
define(function() {
console.log('b.js執行');
console.log(require);
console.log(exports);
console.log(module);
return 'b';
})

引用是這樣的：

// index.js
require(['a', 'b'], function(a, b) {
console.log('index.js執行');
})

define與require雖然不是語法關鍵字，但已經在努力讓自己看起來是關鍵字了，它們依賴于requireJS才能工作。AMD規范仍然是在代碼層面折騰。

再后來出現了CMD規范。

CMD

CMD(Common Module Definition)表示通用模塊定義，該規范是國內發展出來的，由阿里的玉伯提出。就像AMD有個requireJS，CMD有個瀏覽器的實現SeaJS。

定義模塊：

// mymodule.js
define(function(require, exports, module) {
var $ = require('jquery.js')
$('div').addClass('active');
});

加載模塊：

// 加載與使用模塊
seajs.use(['mymodule.js'], function(my){
});

無論是AMD、還是CMD都是在文件內的代碼層面折騰。后來出現了CommonJS，從CommonJS開始，默認一個文件是一個模塊。

CommonJS

定義模塊：

// foo.js
function foo(){
lib.log('hello world!');
}

// 導出給其它模塊
module.exports.foo = foo;

使用模塊：

const foo = require('foo');

CommonJS規范已經相當完善了。微信小程序、小游戲默認推薦的模塊化規范即是CommonJS。

模塊的動態加載與靜態加載

使用CommonJS，可以在運行時動態加載模塊：

if (condition) {
let my = require('./mymodual')
}

但是動態加載不便于引擎靜態分析，不能在開發階段就確認程序的依賴關系。此外，像這樣的引入：

let { stat, exists, readFile } = require('fs');

這是整體引入了fs，然后分別賦值給了三個變量。等價于：

let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

為了實現按需引入及在開發階段盡早確認類庫的依賴關系，盡量減少運行時異常。ES6模塊規范應運而生。

ES2015(ES6)

2015年6月，ES2015正式發布，即ES6。

聲明模塊：

export function area(radius) {
return Math.PI * radius * radius;}

引用與使用模塊：

import {area} from './circle'
console.log('圓面積：' + area(10))

如果想在引入時不使用析造語法，聲明模塊時可以使用default關鍵字：

export default function area(radius) {
return Math.PI * radius * radius;}

引用就這樣了，不再需要花括號：

import area from './circle'

統一的導出格式

一個類庫，有沒有可能同時遵從多個模塊化規范，支持多種方式的導入？

答案是可以的：

;(function (name, definition) {
// 檢測上下文環境是否為AMD或CMD
var hasDefine = typeof define === 'function',
// 檢查上下文環境是否為Node
hasExports = typeof module !== 'undefined' && module.exports;

if (hasDefine) {
// AMD環境或CMD環境
define(definition);
} else if (hasExports) {
// 定義為普通Node模塊，使用CommonJS規范導出
module.exports = definition();
} else {
// 將模塊的執行結果掛在window變量中，在瀏覽器中this指向window對象
// 使用script標簽在html中引入
this[name] = definition();
}
})('hello', function () {
// 真正的模塊代碼放在這里
'use strict';
/*eslint-disable */
var hello = function () {};
return hello;
});

這里導出方式，不但支持以上4種模塊化方案，還支持傳統的script標簽引入。當以script標簽在html頁面中引入時，訪問window.xxx可以調取類庫。例如上面的示例，直接以script引入，可以訪問window.hello。

use strict是開啟嚴格模式。開啟后，對代碼有如下約束：

• 變量必須聲明后再使用

• 函數的參數不能有同名屬性，否則報錯

• 不能使用with語句

• 不能對只讀屬性賦值，否則報錯

• 不能使用前綴 0 表示八進制數，否則報錯

• 不能刪除不可刪除的屬性，否則報錯

• 不能刪除變量delete prop，會報錯，只能刪除屬性delete global[prop]

• eval不會在它的外層作用域引入變量

• eval和arguments不能被重新賦值

• arguments不會自動反映函數參數的變化

• 不能使用arguments.callee

• 不能使用arguments.caller

• 禁止this指向全局對象

• 不能使用fn.caller和fn.arguments獲取函數調用的堆棧

• 增加了保留字(比如protected、static和interface)

---

2019年5月10日 石橋碼農

總結

以上是生活随笔為你收集整理的中引入文件报错_关于前端开发中的模块化的全部內容，希望文章能夠幫你解決所遇到的問題。

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