[TOC]
## AMD
[require.js官網](http://requirejs.org/)
引入 require.js 會產生一下幾個全局
- 全局 define函數
- 全局 require函數
- 依賴js會自動、異步加載
## 使用非 AMD 形式的 模塊化
```
//util.js
export{
getFormatDate:function(date,type){
}
}
//a-util.js
var getFormatDate = require('util.js')
export{
aGetormatDate:function(date){
return getFormatDate(date,2)
}
}
//a.js
var aGetormatDate = require('a-util.js')
var dt = new Date()
console.log(aGetormatDate(dt))
//HTML 中 引入 a 文件 即可 不會帶來全局污染
<script scr='a.js '>< /script>
```
### 使用require.js 進行模塊化
依賴中的文件會異步加載
```
//util.js
define(function(){
return {
getFormatDate;function(date,type){
if (type===1) {
return '2017-06-15'
}else if(type===2){
return '2017年6月15日'
}
}
}
})
//a-util.js
define(['./util.js'],function(util){
return {
aGetFormatDate:function(date){
return util.getFormatDate(date,2)
}
}
})
//a.js
define(['./a-util.js'],function(aUtil){
return {
printDate:function(date){
console.log(aUtil.aGetFormatDate(date))
}
}
})
//main.js
require(['./a.js'],function(a){
var date = new date()
a.printDate(date)
})
//HTML 中 引入 a 文件 即可 不會帶來全局污染
<script src="/require.min.js" data-main="./main.js"></script> //require.js 也可以使用 CDN 上的 js
```
### CommonJs 實現模塊化
- nodes模塊化規范,現在被大量用前端,原因
- 前端開發依賴的插件和庫,都可以從npm中獲取
- 構建工具的高度自動化,使得使用npm的成本非常低
- Commons不會異步加載JS,而是同步一次性加載出來
### AMD和 Commons的使用場景
- 需要異步加載JS,使用AMD
- 使用了npm之后建議使用 Commons
## 構建工具
- grunt
- gulp
- fis4
### webpack
準備工作
1. 安裝 nodejs
2. 安裝`http-server`
`sudo npm install http-server -g`
#### 搭建 webpack 環境
1. 初始化 npm
`npm init `
填寫相關項目相關信息
2. 安裝 webpack
```
npm install webpack --save-dev
--save : 保存起來
-dev : 只用在開發環境
```
3. 安裝 `jquery`
`npm install jquery --save`
4. 在項目目錄中創建`webpack.config.js`
```js
var path = require('path')
var webpack = require ('webpack')
module.exports = {
context:path.resolve(__dirname,'./src'), //資源路徑
entry:{
app:'./app.js' //app 的入口文件
},
output:{
path:path.resolve(__dirname,'./dist'), //輸出文件地方
filename:'bundle.js'
}
}
```
在`src/app.js`添加
`console.log(100)`
在 `packpage.json` 添加新的的script
```
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack" //添加 webpack 在命令行中 運行 npm start
},
```
在命令行中
`npm start`
#### webpack 引用 jquery
在上訴項目中`app.js`引入 juqery
```js
var $ = require('jquery')
console.log($("body"));
```
重新構建
`npm start`
刷新頁面即可
#### 引入 a-utils.js
在`src/a-utils.js`中
```
module.exports = {
print:function(){
console.log(123)
}
}
```
在`src/app,js` 中
```
var aUtil = require('./a-utils.js')
aUtil.print()
```
//重構
`npm start`
重構
`npm start`
