前端总结·工具篇·管理（一）常用模块化方案

前端总结系列


一、模块化规范
	1.1 AMD规范（Asynchronous Module Definition）
	1.2 CMD规范（Common Module Definition）
	1.3 CommonJS规范（NodeJS模块化方案）
	1.4 ES6模块（需要使用babel转码）

二、使用Webpack对模块进行打包
	2.1 安装Webpack
	2.2 导出的模块都导出了什么？
	2.3 打包JS模块
	2.4 更轻松的打包方式
	2.5 打包CSS模块

一、模块化规范

1.1 AMD规范（Asynchronous Module Definition）

AMD规范的实现有RequireJS，下面是一个完整的示例。


index.html
---------------
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <!-- 引入require.js -->
  <script type="text/javascript" src="http://cdn.bootcss.com/require.js/2.3.3/require.js
"></script>
</head>
<body>
  <script type="text/javascript" src="main.js"></script>
</body>
</html>

myName.js
---------------
// 定义模块
define('myName',[],function () {
  return 'My name is white.'
})

yourName.js
---------------
// 定义模块
define('yourName',[],function () {
  return 'Your name is lily.'
})

main.js
---------------
// 调用模块
require(['myName','yourName'],function (myName,yourName) {
  console.log(myName)
  console.log(yourName)
})

1.2 CMD规范（Common Module Definition）

AMD规范的实现有SeaJS，下面是一个示例。


define(function(require, exports, module) {
  var $ = require('jquery');  // 导入模块
  var Spinning = require('./spinning');
  exports.doSomething = ...
  module.exports = ...  // 导出模块
})

1.3 CommonJS规范（NodeJS模块化方案）

CommonJS规范主要用在NodeJS，下面是一个示例。


require('./test');  // 导入当前目录中的模块
require('jquery');  // 导入模块目录中的模块
module.exports = {}  // 导出模块

1.4 ES6模块（需要使用babel转码）

ES6模块需要使用babel转码，下面是一个示例。


import './test';  // 导入当前目录中的模块
import 'jquery';  // 导入模块目录中的模块
export function test() {}  // 导出模块

二、使用Webpack对模块进行打包

JS文件可以直接使用CommonJS语法或者ES6（需要使用babel转码）进行模块化。CSS，图片等其他资源需要配备相应的Loader进行模块化。

2.1 安装Webpack

  • -D等同于--save-dev，-S等同于--save。前者保存在npm配置文件（package.json）的dependencies，后者保存在devDependencies。

npm init -y  // 生成npm配置文件
npm install webpack -D  // 安装Webpack

2.2 导出的模块都导出了什么？

导出的内容可以是字符串，可以是对象，可以是函数。也可以是其他JS数据类型。但是每个文件只能导出一个模块。


yourName.js
---------------
var str = 'Your name is lily.'
module.exports = str  // 导出模块

main.js
---------------
var yourName = require('./yourName')  // 导入模块
console.log(yourName)  // 测试导出的模块

下面我们来分别修改yourName.js中的module.exports的数据类型，然后输入node main.js指令进行测试。

yourName.js（每个文件只能导出一个模块，请逐个进行测试）
---------------
module.exports = 'hello'  // 导出字符串 | 'hello'
module.exports = {a:1,b:2}  // 导出对象 | { a: 1, b: 2 }
module.exports = function () {  // 导出函数 | [Function]
  console.log('hello')
}

main.js（对应的调用方法如下）
---------------
var yourName = require('./yourName')
console.log(yourName)  //  'hello'
console.log(yourName.a)  //  1
console.log(yourName())  //  'hello'

2.3 打包JS模块

在同一目录创建以下文件。all.js里面是没有内容的，用来放置打包后的模块。myName.js和yourName.js都会导出内容，main.js把这两个文件导入。通过webpack main.js all.js指令把main.js以及导入的模块，全部打包到all.js里面。


index.html
---------------
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <!-- 所有的JS都会打包到all.js -->
  <script type="text/javascript" src="all.js"></script>
</body>
</html>

myName.js
---------------
var str = 'My name is white.'  // 定义变量
module.exports = str  // 输出模块

yourName.js
---------------
var str = 'Your name is lily.'
module.exports = str

main.js
---------------
var myName = require('./myName')  // 导入模块（当前目录要使用./）
var yourName = require('./yourName')
console.log(myName)  // 测试导入的模块
console.log(yourName)  // 

webpack main.js all.js  // 打包指令（左边的文件打包到右边）

2.4 更轻松的打包方式

上面的方式，每次都得输入源文件，和打包后的文件，确实非常麻烦。你可以配置以下文件实现输入webpack指令即可打包文件。


webpack.config
---------------
var webpack = require('webpack')

module.exports = {
  entry: './main.js',
  output: {
    path: __dirname,
    filename: 'all.js'
  }
}

2.5 打包CSS模块

打包CSS模块需要配置Loader。


// 安装CSS Loader
npm install css-loader style-loader

// 配置CSS Loader

module: {
  loaders: [
    {css: /\.css$/, loader: 'style-loader!css-loader'}
  ]
}

webpack.config.js（Webpack配置文件）
---------------------
var webpack = require('webpack')

module.exports = {
  entry: './main.js',
  output: {
    path: __dirname,
    filename: 'all.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css-loader'}
    ]
  }
}

总结

文章主要参考以下网站

博客更的有点慢了，还会继续更下去。博客算是半摘录半总结，引用了较多内容的基本都留了原文链接。如果介意的话欢迎私信我。虽然写的一系列文章，并非完全原创。但是这一段时间下来，感觉确实学到了很多。知识在逐步体系化，不会像以前那样零散。Fighting。

下一篇总结异步。

posted @ 2017-03-25 21:55  bergwhite  阅读(3720)  评论(0)  编辑  收藏  举报