Webpack 入门指南 - 2.模块

Posted 冠军

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 入门指南 - 2.模块的主要内容,如果未能解决你的问题,请参考以下文章

webpack入门篇--1.简单介绍

Webpack 入门指南 - 2.模块

webpack入门

webpack入门

Webpack 2 入门

webpack入门介绍