Webpack 入门指南 - 2.模块

Posted 2020-08-15 冠军

这一次我们谈谈模块问题。

通常我们希望这个项目可以分为多个独立的模块，比如，上一次提高的 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 已经很近了。