Webpack 入門指南 - 2.模塊


這一次我們談談模塊問題。

通常我們希望這個項目可以分為多個獨立的模塊,比如,上一次提高的 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 已經很近了。

Webpack 入門指南 - 3. Hello, Angular2!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM