這一次我們談談模塊問題。
通常我們希望這個項目可以分為多個獨立的模塊,比如,上一次提高的 hello 函數,如果我們定義為一個模塊,其它模塊引用之后,直接調用就好了。在前端怎么使用模塊呢?這可說來話長了。
如果我們把 hello 函數定義在文件 hello.js 中,內容如下:
function hello(){ alert("Hello, Webpack!"); }
然后把主入口函數 index.js 的內容寫成下面的內容,你應該會得到一個錯誤信息。
require("./hello");
hello();
對話框是彈不出來的。錯誤信息如下:
Uncaught ReferenceError: hello is not defined, 明明定義了 hello 函數,卻偏偏說找不到。
1. CommonJs 模塊
CommonJs 是目前比較流行,也是出現較早的模塊技術,它誕生於 NodeJs,使用起來其實比較簡單。
首先,它把一個獨立的文件看成一個模塊,比如上面的 hello.js 文件,就可以當成一個模塊。模塊的名稱就是文件名稱,但是可以不用提供擴展名 .js,直接使用文件名就可以。
在導入一個模塊的時候,使用 require 函數,注意是函數,並不是關鍵字,JavaScript 並沒有提供這個關鍵字。函數的參數就是模塊名稱,不過,要注意模塊分為兩種,自定義的模塊和系統模塊。
自定義的模塊必須使用 . 或者 .. 開頭的相對路徑,如果都在同一個目錄下,也需要使用 . 來表示當前路徑,比如上面用到的 require("./hello")。
不是使用 . 或者 .. 開始的相對路徑的,都稱為系統模塊,系統模塊的路徑其實在 node_modules 文件夾中,每個子文件夾就是一個系統模塊。
require 函數的返回結果就是模塊導出的內容。
我們的模塊沒有導出任何內容。所以,雖然被 index 引用了,但是在 index 中卻是無法訪問的。這也說明模塊中定義的函數其實是局部函數,並不是通常意義上的全局函數了。
我們要在模塊中導出內容怎么辦呢,CommonJs 提供了 exports 對象。
在 CommonJs 模塊中,希望導出的內容必須通過 exports 對象,這是 CommonJs 系統提供的系統對象,我們可以直接使用。導出的內容以鍵值對的形式定義到這個對象上,鍵就是導出的名稱,值就是准備導出的內容。
比如,我們希望將 hello 函數導出為名為函數的函數,好像挺繞的,其實很簡單。
function hello(){ alert("Hello, Webpack!"); } exports.hello = hello;
將 index.js 函數的定義修改為
var hello = require("./hello").hello; hello();
重新執行 webpack 命令,刷新網頁,你會看到函數執行了。
2. AMD 模塊
另外一個著名的模塊系統稱為 AMD 模塊,全稱為 Asynchromous Module Defination,翻譯過來就是異步模塊規范,它是由 RequireJs 推動的。
首先,一個文件也被看作一個模塊,所以,我們還拿 hello.js 作為一個模塊吧。
其次,定義模塊使用 define 函數,函數的第一個參數是當前模塊依賴的模塊數組,如果沒有依賴的函數,可以使用一個空的數組表示。
define([], function(){ return { hello: function(){ alert("Hello, Webpack!"); } }; });
第二個參數就是模塊的定義函數,這個函數的返回內容就是模塊的導出內容。我們這里導出一個對象包含我們定義的函數的對象。
最后,我們修改一下 index.js 來導入定義好的 AMD 模塊,並調用 hello 函數。
define(['./hello'], function( helloModule ){ helloModule.hello(); })
這次,我們的 index 依賴提前定義好的 hello 模塊,注意模塊命名的方式還是注意自定義模塊和系統模塊的區別,在第二個函數參數中,它的參數就是被依賴模塊導出的內容,所以這里的 helloModule 就是一個對象,它的 hello 屬性就是我們定義好的函數。
3. ES 2015 和 TypeScript 中的模塊
在 ES2015 中,定義了關鍵字,注意是關鍵字,不是函數了,模塊導出的關鍵字是 export , 導入就是 import 了。
所以,hello 函數可以這樣定義了。
export default function() { alert("Hello, Webpack!"); };
而 index.js 就可以這樣定義。
import hello from "./hello";
hello();
但是,需要注意的是,你必須有 ES2015 的運行環境才行,目前很多瀏覽器不支持怎么辦呢?
我們可以將 ES2015 的代碼先翻譯成標准的 JavaScript 代碼,就可以執行了。
而 TypeScript 作為 ES2015 的超集,我們就使用 TypeScript 來實現。
首先,你必須確認你已經安裝了 TypeScript 的編譯器,全局安裝 TypeScript
npm -g install typescript
安裝之后,可以執行 tsc -v 來檢查版本,目前最新是 2.0.3 版本。
將 hello.js 重新改名為 hello.ts,將 index.js 改名為 index.ts. ts 是 TypeScript 文件的擴展名。
你可以手工執行命令 tsc 分別將兩個 typescript 文件編譯為 javascript 文件。
生成的 hello.js
"use strict"; function default_1() { alert("Hello, Webpack!"); } exports.__esModule = true; exports["default"] = default_1; ;
生成的 index.js
"use strict"; var hello_1 = require("./hello"); hello_1["default"]();
然后,再次執行 webpack 重新打包,你會發現結果仍然正常執行。
4. 使用 tsloader
在第三步,我們可以手工使用 tsc 將 TypeScript 代碼編譯為 JavaScript 代碼之后進行打包,但是這樣太麻煩了,使用 ts-loader 我們可以讓 webpack 自動先調用 tsc 將 TypeScript 代碼編譯為 JavaScript 代碼,然后再自動進行打包工作。
首先,當然要安裝 ts-loader 插件了。
npm install ts-loader --save-dev
目前是 0.9.5 版本。
為了在項目中使用 typescript,你還需要本地安裝 typescript 一次。
npm install typescript --save-dev
還需要配置一下 TypeScript 如何編譯代碼。在當前目錄中創建名為 tsconfig.json 的配置文件。
{ "compilerOptions": { "target": "es5", "sourceMap": true }, "exclude": [ "node_modules" ] }
這里的配置是說,希望生成 es5 標准的 JavaScript 目標文件。
然后,配置 webpack 使用 ts-loader
var HtmlwebpackPlugin = require('html-webpack-plugin'); module.exports = { // 入口 entry: "./index.ts", // 輸出的文件名 output: { filename: 'bundle.js' }, resolve: { // Add `.ts` and `.tsx` as a resolvable extension. extensions: ['', '.ts', '.js'] }, // 添加我們的插件 會自動生成一個html文件 plugins: [ new HtmlwebpackPlugin({ title: 'Hello Webpack' }) ], module: { loaders: [ // all files with a `.ts` extension will be handled by `ts-loader` { test: /\.ts$/, loader: 'ts-loader' } ] } };
這里增加了兩個內容,一個是 resolve 配置,這樣我們只需要使用模塊名稱,webpack 會自動添加后綴來查找模塊文件。另一個就是 module 中的 loader 了,這里是說遇到了 .ts 擴展名的文件,需要先使用 ts-loader 處理之后再打包。
現在,重新執行 webpack 命令,你會發現一切都已經處理好了,刷新頁面,你應該看到代碼正確執行了。
5. 總結
webpack 可以直接支持 CommonJs 和 AMD 模塊,對於 TypeScript ,我們還需要安裝 TypeScript 和 ts-loader.
需要注意的是 Angular 2 使用 TypeScript 作為主力語言,你能做到這里,離 Angular 2 已經很近了。