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 已经很近了。