################主流的前后端模块化规范###############
// 高效的学习
后端服务器端
commonjs nodejs 规范模块化开发 主流的服务器端的
// module.exports 和 require
前端浏览器端
EcmaScript Module 主流的浏览器端的规范
一个文件一个模块
export 暴露一个模块 import 引入一个模块
导入默认暴露的和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'
所有的接口引入 定义为对象a2
import * as a2 from './text.js'
export default
export let a = function(){
}
export {}
先import后export
export * from ''
#####################以往的前端规范###################
// AMD
// Async Module Definition
// define定义模块
// require加载模块
// RequireJS
// 依赖前置，提前执行
// CMD
// Common Module Definition
// seajs
// 尽可能懒执行
// AMD CMD两者的不同在与 require进来的模块 一个提前执行一个并不执行
// UMD
// ESM
########################css模块化规范#####################
##########################环境准备########################
npm i webpack -g
##########################概述#############################
打包器 treeshaking 打包没用的就不打包
scope hoistion
entry 入口
代码的入口 require 找依赖 找依赖的依赖，多个入口的情况
module.exports = { 这个是commonjs的写法，koa中见过
entry:'index.js'
entry:['index.js','start.js']
}
另外的一种写法，推荐的写法，有一个名字的写法
module.exports = { 这个是commonjs的写法，koa中见过
entry:{
index:'index.js' 键值对的写法
}
}
output 出口
打包生成的文件bundle
一个的情况下
module.exports = {
entry:{
index:'index.js'
},
output:{
filename:'index.min.js'
}
}
多个的情况下
module.exports = {
entry:{
index:'index.js' ,
vendor:'vendor.js'
},
output:{ 这里name所代表的就是entry里面的键[index][vendor]
filename:'[name].min.[hash:5].js'
} 出现的标识码 md5码
}
loaders 处理其他类型的 处理文件 转化为模块
编译相关的 babel-loader ES6使用 ts-loader TypeScript使用
样式相关的 style-loader css-loader less-loader postcss-loader
文件相关的 file-loader url-loader
比如 处理 css 可以作为js模块进行引入
module.exports={
module:{ module 属性 对module的一个定义
rules:[ 对于不同文件定义的loader
{ test 当满足这个正则，就使用use定义的css-loader
test:/\.css$ /, 以css文件结尾
use:'css-loader'
}
]
}
}
plugins 其他的功能
参与打包过程 打包优化和压缩 配置编译时的变量
优化相关的 CommonsChunkPlugin UglifyJsPlugin
功能相关的 ExtractTextWebpackPlugin HtmlWebpackPlugin Hot
const webpack = require('webpack')
module.exports={
plugins:[ 数组中的每一项对plugin的应用
new webpack.optimize.UglifyJsPlugin()
]
}
##########################名词#############################
Chunk 代码块
Bundle 大包过的
Module 模块
######################使用webpack############################
webpack命令
webpack -h webpack -v
webpack entry [entry] output
惊讶的是 webpack-cli -h
可以交互式的初始化一个项目
webpack-cli init webpack-addons-demo
pengwings app vendor
迁移项目 V1 =》V2
webpack-cli migrate
webpack配置 用的多
webpack 回去找这个文件下的webpack配置文件
webpack --config webpack.conf.dev.js 自己指定配置文件
webpack第三方脚手架
angular-cli react-starter
##########################打包js 最基本的打包#############################
一、webpack entry output 使用命令打包
1、这里使用es6的方法
app.js 这个是入口文件 下面是内容
import sum form './sum'
console.log('sum(23,24) = ',sum(23,24))
sum.js 这个是被入口文件导入的文件
export default function(a,b){
return a+b
}
接下来打包：
webpack app.js bundle.js
2、这里使用commomjs方法 nodejs语法
app.js 这个是入口文件 下面是内容
const minus = require('./minus.js')
console.log('minus(23,24) = ',minus(23,24))
minus.js 这个是被入口文件导入的文件
module.exports = function(a,b){
return a+b
}
接下来打包：
webpack app.js bundle.js
二、webpack --config webpack.conf.js
1、使用配置文件 在编写的时候需要时用common规范nodejs
webpack.conf.js 这个是配置文件 下面是内容
module.exports = {
entry:{
app:'./app.js'
},
output:{
filename:'[name].[hash:5].js'
}
}
接下来打包：
webpack 如果直接使用，系统谁找默认的 ./webpack.config.js但是我们上面自定义了webpack.conf.js
webpack --config webpack.conf.js
###########################编译es6 babel-preset 语法级别的打包 规范############################
npm i babel-loader babel-core -save
npm i babel-preset-env -save-dev
1、env 包括了es2015-2017
app.js 这个就是要打包的js文件 使用的es6语法
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 这个是配置文件 下面是内容
module.exports = {
entry:{
app:'./app.js'
},
output:{
filename:'[name].[hash:5].js'
},
module:{ 这个模块设置es6相关
rules:[
{
test:/\.js$ /, 匹配正则然后使用use
use:{
loader:'babel-loader', 使用babel-loader
options:{ 设置babel-loader
presets:[ presets选项 babel-preset-env 这个包括了2015-2017版本的 es
'babel-preset-env',{
targets:{ 适应的环境为浏览器 市场占有率>1% 和 最近的两个版本
browsers:['>1%','last 2 versions']
}
}
]
}
},
exclude:'/node_modules/' 排除在外的
}
]
}
}
接下来打包：
webpack --config webpack.conf.js
can i use
二、webpack --config webpack.conf.js
1、使用配置文件 在编写的时候需要时用common规范nodejs
webpack.conf.js 这个是配置文件 下面是内容
module.exports = {
entry:{
app:'./app.js'
},
output:{
filename:'[name].[hash:5].js'
}
}
接下来打包：
webpack 如果直接使用，系统谁找默认的 ./webpack.config.js但是我们上面自定义了webpack.conf.js
webpack --config webpack.conf.js
###########################编译es6 babel-preset 语法级别的打包 规范############################
npm i babel-loader babel-core -save
npm i babel-preset-env -save-dev
1、env 包括了es2015-2017
app.js 这个就是要打包的js文件 使用的es6语法
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 这个是配置文件 下面是内容
module.exports = {
entry:{
app:'./app.js'
},
output:{
filename:'[name].[hash:5].js'
},
module:{ 这个模块设置es6相关
rules:[
{
test:/\.js$ /, 匹配正则然后使用use
use:{
loader:'babel-loader', 使用babel-loader
options:{ 设置babel-loader
presets:[ presets选项 babel-preset-env 这个包括了2015-2017版本的 es
'babel-preset-env',{
targets:{ 适应的环境为浏览器 市场占有率>1% 和 最近的两个版本
browsers:['>1%','last 2 versions']
}
}
]
}
},
exclude:'/node_modules/' 排除在外的
}
]
}
}
接下来打包：
webpack --config webpack.conf.js
can i use
##########################babel polyfill 全局垫片 函数方法级别打包#############################
全局垫片 开发应用的
npm i babel-polyfill -s
import 'babel-polyfill'
##########################babel runtime transform 局部垫片 函数方法级别打包#############################
局部垫片 开发框架
如果使用到es6 es7的时候 会把每一个方法打包到单独的文件里面去
npm i babel-plugin-transform-runtime -save-dev
npm i babel-runtime -s
如何使用：在项目的根目录下创建一个 .babelrc 里面配置和babel先关的内容
.babelrc 文件内容如下： json格式
{
'presets':[
['babel-preset-env',{
'targets':{
'browsers':['last 2 versions']
}
}]
]
'plugins':['transform-runtime']
}
###########################总结一下############################
Generator es7 Set新的类型 等
应用开发一般使用 babel-presets 就可以,但是在打包的时候有些新的方法是没有进行打包处理的，比如.map() .includes() new Set()等，这个时候需要进一步打包
babel-presets 只是针对语法 进行版本的规范 针对函数和方法需要借助一下的插件
如果要是使用es6 其他的方法 import 'babel-polyfill' 这个会污染全局变量
如果开发 库框架的的时候 使用：babel-runtime 将presets 拿到根目录下的 .babelrc 文件里面 json格式 并且加上 'plugins':['transform-runtime']