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

时间 2019-11-19

标签前端总结工具管理经常使用模块化方案繁體版

原文原文链接

前端总结系列

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

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

1、模块化规范

1.1 AMD规范（Asynchronous Module Definition）

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

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，下面是一个示例。css

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

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

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

CommonJS规范

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

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

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

ES6模块文档 - 廖雪峰

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

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

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

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数据类型。可是每一个文件只能导出一个模块。node

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里面。jquery

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

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

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

2.5 打包CSS模块

打包CSS模块须要配置Loader。git

// 安装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'}
    ]
  }
}

总结

文章主要参考如下网站es6

Webpack中文指南

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

下一篇总结异步。