################主流的前后端模塊化規(guī)范###############
// 高效的學(xué)習(xí)
后端服務(wù)器端
commonjs nodejs 規(guī)范模塊化開發(fā) 主流的服務(wù)器端的
// module.exports 和 require
前端瀏覽器端
EcmaScript? Module? 主流的瀏覽器端的規(guī)范
一個(gè)文件一個(gè)模塊
export 暴露一個(gè)模塊 import 引入一個(gè)模塊
導(dǎo)入默認(rèn)暴露的和a箱硕，b方法
import theDefault,{a,b} from './text.js'
import {a,b} from './text.js';
import theDefault from './text.js'
重新命名
import {a as a1} from './text.js'
所有的接口引入 定義為對(duì)象a2
import * as a2 from './text.js'
export default
export let a = function(){
}
export {}
先import后export
export * from ''
#####################以往的前端規(guī)范###################
// AMD
// Async Module Definition
// define定義模塊
// require加載模塊
// RequireJS
// 依賴前置芝薇，提前執(zhí)行
// CMD
// Common Module Definition
// seajs
// 盡可能懶執(zhí)行?
// AMD CMD兩者的不同在與 require進(jìn)來的模塊 一個(gè)提前執(zhí)行一個(gè)并不執(zhí)行
// UMD
// ESM
########################css模塊化規(guī)范#####################
##########################環(huán)境準(zhǔn)備########################
npm i webpack -g
##########################概述#############################
打包器 treeshaking 打包沒用的就不打包
scope hoistion
entry 入口
代碼的入口 require 找依賴 找依賴的依賴，多個(gè)入口的情況
module.exports = {? ? 這個(gè)是commonjs的寫法婚惫，koa中見過
entry:'index.js'?
entry:['index.js','start.js']?
}
另外的一種寫法封断，推薦的寫法涣狗，有一個(gè)名字的寫法
module.exports = {? ? 這個(gè)是commonjs的寫法碑诉，koa中見過?
entry:{
index:'index.js'? 鍵值對(duì)的寫法
}
}
output 出口
打包生成的文件bundle
一個(gè)的情況下
module.exports = {? ? ?
entry:{
index:'index.js'?
},
output:{
filename:'index.min.js'
}
}
多個(gè)的情況下
module.exports = {? ? ?
entry:{
index:'index.js' ,
vendor:'vendor.js'?
},
output:{? 這里name所代表的就是entry里面的鍵[index][vendor]
filename:'[name].min.[hash:5].js'
}? ? ? ? 出現(xiàn)的標(biāo)識(shí)碼 md5碼
}
loaders 處理其他類型的 處理文件 轉(zhuǎn)化為模塊
編譯相關(guān)的 babel-loader ES6使用 ts-loader TypeScript使用
樣式相關(guān)的 style-loader css-loader less-loader postcss-loader
文件相關(guān)的 file-loader url-loader
比如 處理 css 可以作為js模塊進(jìn)行引入
module.exports={
module:{? ? ? module 屬性 對(duì)module的一個(gè)定義
rules:[? 對(duì)于不同文件定義的loader
{? test 當(dāng)滿足這個(gè)正則携取，就使用use定義的css-loader
test:/\.css$ /, 以css文件結(jié)尾
use:'css-loader'
}
]
}
}
plugins 其他的功能
參與打包過程 打包優(yōu)化和壓縮 配置編譯時(shí)的變量
優(yōu)化相關(guān)的 CommonsChunkPlugin UglifyJsPlugin
功能相關(guān)的 ExtractTextWebpackPlugin HtmlWebpackPlugin Hot
const webpack = require('webpack')
module.exports={
plugins:[ 數(shù)組中的每一項(xiàng)對(duì)plugin的應(yīng)用
new webpack.optimize.UglifyJsPlugin()
]
}
##########################名詞#############################
Chunk 代碼塊
Bundle 大包過的
Module 模塊
######################使用webpack############################
webpack命令
webpack -h webpack -v
webpack entry [entry] output
驚訝的是 webpack-cli -h
可以交互式的初始化一個(gè)項(xiàng)目
webpack-cli init webpack-addons-demo
pengwings? app? vendor
遷移項(xiàng)目 V1 =》V2
webpack-cli migrate
webpack配置 用的多
webpack 回去找這個(gè)文件下的webpack配置文件
webpack --config webpack.conf.dev.js 自己指定配置文件
webpack第三方腳手架
angular-cli react-starter
##########################打包js 最基本的打包#############################
一太示、webpack entry output? 使用命令打包?
1柠贤、這里使用es6的方法
app.js 這個(gè)是入口文件 下面是內(nèi)容
import sum form './sum'?
console.log('sum(23,24) = ',sum(23,24))
sum.js 這個(gè)是被入口文件導(dǎo)入的文件
export default function(a,b){
return a+b
}
接下來打包：
webpack app.js bundle.js
2、這里使用commomjs方法 nodejs語(yǔ)法
app.js 這個(gè)是入口文件 下面是內(nèi)容
const minus = require('./minus.js')
console.log('minus(23,24) = ',minus(23,24))
minus.js 這個(gè)是被入口文件導(dǎo)入的文件
module.exports = function(a,b){
return a+b
}
接下來打包：
webpack app.js bundle.js
二类缤、webpack --config webpack.conf.js
1臼勉、使用配置文件 在編寫的時(shí)候需要時(shí)用common規(guī)范nodejs
webpack.conf.js 這個(gè)是配置文件 下面是內(nèi)容
module.exports = {
entry:{
app:'./app.js'
},
output:{
filename:'[name].[hash:5].js'
}
}
接下來打包：
webpack 如果直接使用，系統(tǒng)誰找默認(rèn)的 ./webpack.config.js但是我們上面自定義了webpack.conf.js
webpack --config webpack.conf.js
###########################編譯es6 babel-preset 語(yǔ)法級(jí)別的打包 規(guī)范############################
npm i babel-loader babel-core -save
npm i babel-preset-env -save-dev
1餐弱、env 包括了es2015-2017
app.js 這個(gè)就是要打包的js文件 使用的es6語(yǔ)法
let func = () =>{}
const NUM = 45
let arr = [1,2,3,4]
let arr1 = arr.map(item => item *2)
console.log('Set類型：',new Set(arr1))
webpack.conf.js 這個(gè)是配置文件 下面是內(nèi)容
module.exports = {
entry:{
app:'./app.js'
},
output:{
filename:'[name].[hash:5].js'
},
module:{? 這個(gè)模塊設(shè)置es6相關(guān)
rules:[
{
test:/\.js$ /,? 匹配正則然后使用use
use:{
loader:'babel-loader',? 使用babel-loader
options:{ 設(shè)置babel-loader
presets:[ presets選項(xiàng) babel-preset-env 這個(gè)包括了2015-2017版本的 es
'babel-preset-env',{
targets:{? ? ? ? ? 適應(yīng)的環(huán)境為瀏覽器? 市場(chǎng)占有率>1% 和 最近的兩個(gè)版本
browsers:['>1%','last 2 versions']
}
}
]
}
},
exclude:'/node_modules/'? 排除在外的
}
]
}
}
接下來打包：
webpack --config webpack.conf.js
? ? can i use?
二宴霸、webpack --config webpack.conf.js
1、使用配置文件 在編寫的時(shí)候需要時(shí)用common規(guī)范nodejs
webpack.conf.js 這個(gè)是配置文件 下面是內(nèi)容
module.exports = {
entry:{
app:'./app.js'
},
output:{
filename:'[name].[hash:5].js'
}
}
接下來打包：
webpack 如果直接使用膏蚓，系統(tǒng)誰找默認(rèn)的 ./webpack.config.js但是我們上面自定義了webpack.conf.js
webpack --config webpack.conf.js
###########################編譯es6 babel-preset 語(yǔ)法級(jí)別的打包 規(guī)范############################
npm i babel-loader babel-core -save
npm i babel-preset-env -save-dev
1瓢谢、env 包括了es2015-2017
app.js 這個(gè)就是要打包的js文件 使用的es6語(yǔ)法
let func = () =>{}
const NUM = 45
let arr = [1,2,3,4]
let arr1 = arr.map(item => item *2)
console.log('Set類型：',new Set(arr1))
webpack.conf.js 這個(gè)是配置文件 下面是內(nèi)容
module.exports = {
entry:{
app:'./app.js'
},
output:{
filename:'[name].[hash:5].js'
},
module:{? 這個(gè)模塊設(shè)置es6相關(guān)
rules:[
{
test:/\.js$ /,? 匹配正則然后使用use
use:{
loader:'babel-loader',? 使用babel-loader
options:{ 設(shè)置babel-loader
presets:[ presets選項(xiàng) babel-preset-env 這個(gè)包括了2015-2017版本的 es
'babel-preset-env',{
targets:{? ? ? ? ? 適應(yīng)的環(huán)境為瀏覽器? 市場(chǎng)占有率>1% 和 最近的兩個(gè)版本
browsers:['>1%','last 2 versions']
}
}
]
}
},
exclude:'/node_modules/'? 排除在外的
}
]
}
}
接下來打包：
webpack --config webpack.conf.js
? ? can i use?
##########################babel polyfill? 全局墊片 函數(shù)方法級(jí)別打包#############################
全局墊片 開發(fā)應(yīng)用的
npm i babel-polyfill -s
import 'babel-polyfill'
##########################babel runtime transform? 局部墊片 函數(shù)方法級(jí)別打包#############################
局部墊片 開發(fā)框架
如果使用到es6 es7的時(shí)候 會(huì)把每一個(gè)方法打包到單獨(dú)的文件里面去
npm i babel-plugin-transform-runtime -save-dev
npm i babel-runtime -s
如何使用：在項(xiàng)目的根目錄下創(chuàng)建一個(gè) .babelrc 里面配置和babel先關(guān)的內(nèi)容
.babelrc 文件內(nèi)容如下： json格式
{
'presets':[
['babel-preset-env',{
'targets':{
'browsers':['last 2 versions']
}
}]
]
'plugins':['transform-runtime']
}
###########################總結(jié)一下############################
Generator es7 Set新的類型 等
應(yīng)用開發(fā)一般使用 babel-presets 就可以,但是在打包的時(shí)候有些新的方法是沒有進(jìn)行打包處理的，比如.map() .includes() new Set()等驮瞧，這個(gè)時(shí)候需要進(jìn)一步打包
babel-presets 只是針對(duì)語(yǔ)法 進(jìn)行版本的規(guī)范 針對(duì)函數(shù)和方法需要借助一下的插件
如果要是使用es6 其他的方法 import 'babel-polyfill' 這個(gè)會(huì)污染全局變量
如果開發(fā) 庫(kù)框架的的時(shí)候 使用：babel-runtime? 將presets 拿到根目錄下的? .babelrc 文件里面 json格式 并且加上 'plugins':['transform-runtime']
