# 模块化

命名空间 ---> COMMONJS ---> AMD/CMD/UMD ---> ES6 module

命名空间：库名.类别名.方法名 --->YUI

CommonJS：Midules/1.1.1，一个文件为要给模块，通过 module.exports 暴露模块接口，通过 require 引入模块，同步执行 --->commonjs

AMD（Async Module Definition）：使用 define 定义模块，使用 require 加载模块，依赖牵制，提前执行 --->requireJS

CMD（Common Module Definition）：一个文件为一个模块，使用 define 来定义一个模块，使用 require 来加载一个模块，尽可能懒执行 --->SeaJS

UMD（Universal Module Definition）：通用解决方案，三个步骤，判断是否支持 AMD ，判断是否支持 CommonJS ，如果都没有则使用全局变量

ESM（EcmaScript Module）：一个文件一个模块，import 引入，export 暴露

webpack支持：AMD（RequireJS）、ES Modules、CommonJS webpack3以后开始支持 es6 语法，不再需要 Babel 插件了

CSS模块化--->CSS设计模式 OOCSS 结构和设计的分离，容器和内容的分离，主导可获得不同地方使用的类 SMACSS 可扩展和模块化结构，目标是减少代码量，减少代码的维护，可规划为五个部分：Base + Layout + Module + State + Theme Atomic CSS 原子的CSS，编写视觉功能小，单用途的CSS MCSS（multilayer css） 多层级的CSS，底层foundation--->基本base--->项目project--->装束cosmetic AMCSS 针对属性设计CSS BEM 基于Block、Element、Modifier CSS Modules

webpack 的核心
Entry   
Output
Loaders 处理文件，转化为模块
Plugins

webpack -h 查看命令
webpack -v 查看版本
webpack <entry>[<entry>]<output> 打包
webpack --config webpack.conf.dev.js 指定配置文件

脚手架 webpack-cli vue-cli angular-cli react-starter

eg.打包JS

编译ES6 Babel- npm install babel-loader@8.0.0-beta.0 @babel/core npm install -save-dev babel-loader babel-core

Babel Presets npm install @babel/preset-env -save-dev npm install babel-preset-env -save-dev

Babel Polyfill 全局垫片，为应用准备 npm install babel-polyfill -save import "babel-polyfill"

Babel Runtime Transform 局部垫片，为开发框架准备 npm install babel-plugin-transform-runtime -save-dev npm install babel-runtime -save 使用 .babelrc 文件配置

编译 TypeScript JS 的超集 typescriptlang.org/tslang.cn typescript-loader npm i typescript ts-loader --save-dev npm i typescript awesome-typescript-loader --save-dev 使用需要 tsconfig.json webpack.config.js

配置选项参考 官网/docs/handbook/compiler-options.html 常用选项 compilerOptions include exclude

声明文件 用来做语法提示 eg. Typings、lodash

P11 webpack的使用