模块化

AMD：Require.js异步模块规范，是RequireJS在推广过程中对模块定义的规范化产出的，推崇依赖前置，异步加载； CMD：是Sea.js 在推广过程中对模块定义的规范化产出的，推崇依赖就近，同步加载； CommonJS：NodeJS模块系统具体实现的基石。

  • 模块分为单文件模块和包
  • 模块成员导出：module.exports和exports
  • 模块成员导入：require(‘模块标识符’)

UMD：兼容AMD和CommonJS规范的同时，还兼容全局引用的方式； ES6：ES6模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量； 其中AMD和CMD的语法类似，都是使用define和require来进行模块的定义和加载；CommonJS 则使用的是moduel.exports、exports和require来紧密模块的定义和加载。然而从本质上来讲，它们都没有解决根本问题： 性能低：浏览器最怕从服务器加载又小又多的文件； 模块之间的管理之类的问题； 都是JavaScript函数模拟实现的，需要第三方库的支持； 而ES6(ECMAScript2015)可以说是一个“跨时代”的更新，使得的JavaScript在原生语言上实现了模块化：export和import。ES6的原生模块功能，它兼顾了规范、语法简约型和异步加载功能，还支持循环依赖。是不是很强大。

babel

  1. 安装如下内容
    npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
  2. 继续安装polyfill
    npm install --save @babel/polyfill

  3. 创建babel.config.js文件并配置如下内容

    1. const presets = [
    2.  ["@babel/env",{
    3.      target: {
    4.          edge: "17",
    5.          firefox: "60",
    6.          chrome: "67",
    7.          safari: "11.1"
    8.      }
    9.  }]
    10. ]
    11. module.exports = {
    12.  presets
    13. }

  4. 执行一下命令
    npx babel-node index.js

ES6模块化

默认导入导出

  • 默认导出语法 export default 默认导出成员
  • 默认导入语法 import 接收名称 from ‘模块标识符’

按需导入导出

  • 按需导出语法 export let count = 10;

  • 按需导入语法 import {count} from ‘模块标识符’

    直接导入并执行模块代码

  • import ‘模块路径’

    webpack

    基本配置

  1. 执行 npm install webpack webpack-cli -D
  2. 在项目根目录中创建 webpack.config.js 配置文件，并初始化如下代码：
  1. module.exports = {
  2.     mode: 'development' //指定构建模式
  3. }
  1. 在 package.json 配置文件的script节点中，增加如下代码：
  1. "script":{
  2.     "dev": "webpack"
  3. }
  1. 执行npm run dev命令

配置打包的入口和出口

配置webpack的自动打包功能

  1. 执行npm install webpack-dev-server -D
  2. 在 package.json 配置文件的script节点中，增加如下代码：
  1. "script":{
  2.     "dev": "webpack",
  3.     //"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
  4. }
  1. 将src目录下的index.html文件script脚本的引用路径，修改为’./buldle.js’
  2. 执行 npm run dev命令
  3. 在浏览器输入http://localhost:8080查看效果

配置html-webpack-plugin

  1. 执行npm install html-webpack-plugin -D
  2. 修改webpack.config.js文件，添加如下配置代码：
  1. const HtmlWebpackPlugin = require('html-webpack-plugin');
  2. const htmlPlugin = new HtmlWebpackPlugin({
  3.     template: './src/index.html',
  4.     filename: 'index.html'
  5. })
  1. 修改webpack.config.js文件，添加如下配置代码：
  1. module.exports = {
  2.     plugins: [htmlPlugin]
  3. }

Loader

打包处理CSS

  1. 执行npm i style-loader css-loader -D
  2. 在webpack.config.js的module中的rules，添加如下loader规则：
  1. module: {
  2.     rules: [
  3.         {test:/\.css$/, use:['style-loader','css-loadder']}    
  4.     ]
  5. }

打包处理Less

  1. 执行npm i less-loader less -D
  2. 在webpack.config.js的module中的rules，添加如下loader规则：
  1. module: {
  2.     rules: [
  3.         {test:/\.less/, use:['style-loader','css-loadder','less-loader']}    
  4.     ]
  5. }

打包处理Scss

  1. 执行npm i sass-loader node-sass -D
  2. 在webpack.config.js的module中的rules，添加如下loader规则：
  1. module: {
  2.     rules: [
  3.         {test:/\.scss/, use:['style-loader','css-loadder','sass-loader']}    
  4.     ]
  5. }

配置postCSS自动添加css兼容前缀

  1. 执行npm i postcss-loader autoprefixer -D
  2. 在项目根目录创建postcss.config.js文件，并初始化如下代码：
  1. const autoprefixer = require('autoprefixer');
  2. module.exports = {
  3.     plugins: [autoprefixer]
  4. }
  1. 在webpack.config.js的module中的rules，添加如下loader规则：
  1. module: {
  2.     rules: [
  3.         {test:/\.css/, use:['style-loader','css-loadder','postcss-loader']}    
  4.     ]
  5. }

打包处理图片和字体文件

  1. 执行npm i url-loader file-loader -D
  2. 在项目根目录创建postcss.config.js文件，并初始化如下代码：
  1. module: {
  2.     rules: [
  3.         {
  4.             test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, 
  5.             use:['url-loader?limit=16940']}    
  6.     ]
  7. }

打包处理高级语法

  1. 执行npm i babel-loader @babel/core @babel/runtime -D
  2. 执行npm i @babel.preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
  3. 在项目根目录创建babel.config.js文件，并初始化如下代码：
  1. module.exports = {
  2.     presets: ['@babel/preset-env'],
  3.     plugins: ['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
  4. }
  1. 在webpack.config.js的module中的rules，添加如下loader规则：
  1. module: {
  2.     rules: [
  3.          test:/\.js$/,use:'babel-loader',exclude: /node_modules/}    
  4.     ]
  5. }

配置Vue组件加载器

  1. 执行 npm i vue-loader vue-template-compiler -D
  2. 在webpack.config.js的配置文件中，添加如下vue-loader规则：
  1. const VueLoaderPlugin = require('vue-loader/lib/plugin');
  2. module.exports = {
  3.     module: {
  4.         rules: [
  5.             {test:/\.vue$/,loader:'vue-loader'}
  6.         ]
  7.     },
  8.     plugins: [
  9.         new VueLoaderPlugin()
  10.     ]
  11. }
  1. 执行npm i vue -S
  2. 在src目录下的index.js入口文件中，配置如下代码
  1. import Vue from 'vue'
  3. import App from './components/App.vue'
  5. const vm = {
  6.     el: '#app',
  7.     render: h => h(App)
  8. }

webpack打包发布

修改package.json中代码

  1. "script": {
  2.  //用于打包命令
  3.  "builde": "webpack -p",
  4.  //用于开发调试命令
  5.  "dev": "webpack-dev-server --open --host 127.0.01 --port 3000"
  6. }