模块化前端开发入门指南(三)

概览

使用webpack后,模块化开发中,模块的写法

系统环境

安装nodejs

nodejs下载地址：https://nodejs.org

安装完成后打开命令行控制台。输入node -v查看版本。如果正常显示，表示nodejs安装成功。否则需要配置系统全局变量。
如何安装nodejs和配置环境变量请参见这里。

安装webpack

安装nodejs后，打开控制台，执行npm命令即可。

> npm install -g webpack

创建模块

基于CommonJs的模块

基于CommonJs的模块写法与nodejs是一致的.写模块时,使用require引入其他模块,使用exports或者module.exports将模块的API暴露出来.

/*
ModuleA
*/
function ModuleA() {}
ModuleA.prototype.fn1 = function() {};
ModuleA.prototype.fn2 = function() {};

module.exprots = ModuleA;

/*
moduleB
*/

//引用moduleA,引用路径为相对路径
var ModuleA = require('./moduleA');

//因为moduleA是class,需要使用new实例化后才能使用
var moduleAInstance = new ModuleA();

//调用moduleA实例的方法
moduleAInstance.fn1();
moduleAInstance.fn2();

但是也不是完全相同.尽管与nodejs一样都使用的CommonJs规范书写模块,由于是预编译机制,在编译时,需要将可能用到的模块一次性全部打包进来.所以在书写前端模块时,我们需要将用到的模块直接按字面量引入,不要使用if...else或者动态赋值的方式动态引入模块.这点与nodejs是有区别的.

不好的用法:

//这种用法不会引起错误,但是会引起困惑,让其他人以为可以动态加载模块
var module;
if(a) {
	module = require('./moduleA');
} else {
	module = require('./moduleB');
}

错误的用法:

//经过计算的动态变量作为模块名来引入模块,会导致错误
var vars = 'abcde';
var vars2 = vars.slice(0,2); //计算
var module = require(vars2);

推荐的用法:

//在模块头部一次性引入用到的模块
var moduleA = require('./moduleA');
var moduleB = require('./moduleB');
var moduleC = require('./moduleC');
//...load more modules...

//do something with loaded modules

基于es6的模块(使用import,export导入模块)

webpack支持丰富的扩展机制,babel也为webpack提供了插件支持.通过使用babel的webapck loader插件,我们可以编写es6的javascript代码,然后使用babel编译输出为es5的javascript代码.
我们这里主要说明的是es6的模块加载机制在模块化中的使用.使用es6的import和export关键字后,我们的模块就可以写成这样:

/*
moduleA
*/

function ModuleA() {}
ModuleA.prototype.fn1 = function() {};
ModuleA.prototype.fn2 = function() {};

//使用export关键字,将ModuleA曝露给外部使用
export default ModuleA;

/*
moduleB
*/

//使用import关键字引入moduleA
import ModuleA from './moduleA';

//因为moduleA是class,需要使用new实例化后才能使用
var moduleAInstance = new ModuleA();

//调用moduleA实例的方法
moduleAInstance.fn1();
moduleAInstance.fn2();

上述两种模块化写法,相比seajs和requirejs,少了对define()的依赖,在书写模块时,能够提供了不少便利.

第三方库的引用

引用第三方库时,有两种方法引用第三方库:一种是直接写库的相对路径;一种是在配置文件中为库配置别名.

//第一种用法,输入第三方库相对此模块的文件相对路径,当模块在项目中处于比较深的文件结构的时候,写起来会比较麻烦
var $ = require('../../../../jquery/dist/jquery.min');


//第二种方法,在模块化加载器中配置别名,指定模块的文件路径
//比如将jquery的路径为别名后,直接使用别名即可
//如果set alias jquery /libs/jquery/dist/jquery.min
//require('jquery')与require('/libs/jquery/dist/jquery.min')是等效的
//不同的模块加载器的配置方式有区别,这里是伪代码,你懂的
var $ = require('jquery');

一般第二种方式用的比较多.

后面会讲解如何用webpack搭建一个完整的模块化项目,这里先不展开.

延伸阅读

CommonJs规范

ES6入门指南

如果觉得有用,请点个赞支持我!