前端總結·工具篇·管理（一）經常使用模塊化方案

時間 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'}
    ]
  }
}