前端模块化

TIP

最后更新时间:2019年10月5日

字数:1689

前端模块化

主要内容

  • 前端模块化

    • 什么是前端模块化
    • 前端模块化的优点
    • 主流前端模块化解决方案
  • CommandJS

    • 特点
    • module对象
      • module.parent
      • module.exports
    • 定义模块
    • 输出模块
    • 加载模块
    • 示例代码
    • module.exports和exports
  • AMD

    • require.js
    • 示例代码
    • 定义模块:define
    • 加载模块:require
    • 配置文件
      • 全局配置
      • 局部配置
      • 注意事项
    • 第三方模块
    • AMD VS CommonJS
  • CMD

    • 示例代码
    • 工厂方法:factory
  • AMD VS CMD

    • 区别
  • UMD

    • AMD/CMD原则
    • UMD实现
  • ES modules

    • 模块化现状
    • ES6模块化优点
    • ES6模块化特点
    • 严格模式
    • 命名导出(named exports)
    • 默认导出(default exports)
    • 导入命名导出
    • 导入默认导出
    • 仅导入模块
  • webpack

    • 安装webpack
      • 全局安装
      • 本地安装
      • 安装体验版
    • 核心概念
      • 入口(entry)
      • 出口(output)
      • loader
      • 插件(plugins)
      • mode
    • webpack运行方式
      • 命令行运行
      • webpack配置文件
  • webpack配置

    • 配置说明
    • webpack开发配置
    • webpack打包配置
  • vue-cli中webpack逐行解析

    • config说明
      • prod.env.js
      • dev.env.js
      • index.js
    • build说明
      • Build.js
      • check-versions.js
      • utils.js
      • vue-loader.conf.js
      • webpack.base.conf.js
      • webpack.dev.conf.js
      • webpack.prod.conf.js
  • parcel

    • 特点
    • 安装
    • 使用
    • 特更新替换
      • 热更新说明
      • 热更新API
    • watch
    • 打包
  • rollup

    • 安装
    • rollup.config.js
      • 命令
      • rollup-plugin-node-resolve
      • rollup-plugin-babel
  • 使用ES6

    • babel-core
    • babel-preset-env
    • babel-plugin-external-helpers
    • babel-preset-latest
    • babrlrc
    • babel-polyfill
    • babel-runtime