前端模块化

1.模块化实现的雏形

传统的js存在的问题：变量污染，js顺序改变影响其他js执行

解决方法进步历史

var ModuleA = (function(){
	var obj = {}
	obj.flag = true
	obj.myFunc = function(info){
		console.log(info)
	}
	return obj
})()

if(ModuleA.flag){
	console.log('www');
}
ModuleA.myFunc('vvvv')
console.log(ModuleA)

常见的模块化规范

CommonJS、AMD、CMD、ES6的Modules

2.CommonJS的导出和导入

• 导出export

module.exports = {
	flag:true,
	test(a,b){
		return a + b
	}
}

• 导入

let { test,flag } = require('导出的文件路径');
//或者
import { test,flag } from '导出的文件路径';

// 等同于
let _mA = require('导出的文件路径');
let test = _mA.test;
let flag = _mA.flag;

3.ES6的Modules

• 导出export

// aaa.js
var flag = true;
function sum(num1,num2){
    return num1 + num2
}
if(flag){
    console.log(sum(num1,num2))
}


// 1导出方式一
export {
    sum,flag
}

// 2导出方式二
export var num1 = 1000;
export var height =1.88;

// 3导出函数/类
export function mull(num1,num2){
    return num1 * num2
}
export class Person{
    run(){
        console.log('在奔跑')
    }
}

// 4默认导出(一个模块(js文件)，只能有一个export default)
export default
export default function(){
    console.log('export default ')
}

• 导入import

// 1导入{}中定义的变量
import {flag,sum} from './aaa.js';
if(flag){
   console.log(sum(20,30))
}

// 2直接导入export定义的变量
import {num1,height} from './aaa.js';
console.log(num1,height)

// 3导入export的function
import {mull,person} from './aaa.js';
mull(30,50)

const p = new Person();
p.run()  //在奔跑

// 4默认导入
import myownFun from './aaa.js';

// 5全部导入
import * as aaaname from './aaa.js'
console.log(aaaname.flag)  //true

*某些情况下，一个模块包含某个功能，我们不希望给这个功能命名，而是让导入者可以自己命名，这时候就可以使用export default

4.webpack概念和安装

概念：模块化，打包

webpack运行必须依赖node环境，node为了正常执行很多代码，需要依赖各种包，npm就是包管理工具。

全局安装

npm install webpack -g

局部安装

cd 对于目录
npm install webpack --save-dev

为什么全局安装后，还要局部安装呢

• 在终端执行webpack命令。使用的全局安装的webpack
• 当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的就是局部的webpack

目录结构

 

5.webpack.config.js和package.json配置

• webpack.config.js

// 从node里导入path包（需要先安装依赖）
const path = request('path')

module.exports = {
	entry:'./src/main.js',
	output:{
		path:'path.resolve(_dirname,'dist')',
		filename:'bundle.js'
	}
}

• package.json

  {
    "name": "admin",
    "version": "0.1.0",
    "private": true,
      //npm run vue-cli-service serve === npm run serve
    "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint"
    },
    "dependencies": {
      "core-js": "^3.8.3",
      "element-ui": "^2.15.9",
      "particles.js": "^2.0.0",
      "vue": "^2.6.14",
      "vue-router": "^3.5.1"
    },
    "devDependencies": {
      "@babel/core": "^7.12.16",
      "@babel/eslint-parser": "^7.12.16",
      "@vue/cli-plugin-babel": "~5.0.0",
      "@vue/cli-plugin-eslint": "~5.0.0",
      "@vue/cli-plugin-router": "~5.0.0",
      "@vue/cli-service": "~5.0.0",
      "axios": "^0.27.2",
      "eslint": "^7.32.0",
      "eslint-plugin-vue": "^8.0.3",
      "vue-particles": "^1.0.9",
      "vue-template-compiler": "^2.6.14"
    },
   
  }

  npm run vue-cli-service serve(使用的全局的webpack) === npm run serve(优先用本地webpack，找不到再去用全局)

6.css文件配置

• css-loader、style-loader安装和配置

        css-loader将css文件进行加载，style-loader将模块导出，作为样式添加的dom中

npm install --save-dev css-loader
npm install style-loader --save-dev

// webpack.config.js
// 从node里导入path包（需要先安装依赖）
const path = request('path')

module.exports = {
	entry:'./src/main.js',
	output:{
		path:'path.resolve(_dirname,'dist')',
		filename:'bundle.js'
	},
    
    module: {
        rules: [
          {
            test: /\.css$/,
            //webpack在读取使用loader时候，从右向左    
            use: [ 'style-loader', 'css-loader' ]
          }
        ]
    }

}

• 引入css 

// main.js
require('./css/normal.css')

6.less文件处理

• 安装和配置

npm install --save-dev less-loader less

// webpack.config.js
// 从node里导入path包（需要先安装依赖）
const path = request('path')

module.exports = {
	entry:'./src/main.js',
	output:{
		path:'path.resolve(_dirname,'dist')',
		filename:'bundle.js'
	},
    
    module: {
        rules: [
          {
            test: /\.css$/,
            //webpack在读取使用loader时候，从右向左    
            use: [ 'style-loader', 'css-loader' ]
          },{
            loader: "style-loader" // creates style nodes from JS strings
          }, {
            loader: "css-loader" // translates CSS into CommonJS
          }, {
            loader: "less-loader" // compiles Less to CSS
          }
        ]
    }

}

6.图片文件处理

npm install --save-dev url-loader

// webpack.config.js
// 从node里导入path包（需要先安装依赖）
const path = request('path')

module.exports = {
	entry:'./src/main.js',
	output:{
		path:'path.resolve(_dirname,'dist')',
		filename:'bundle.js',
        // 为所有url的自动拼接dist/
        publiPath:'dist/'
	},
    
    module: {
        rules: [
          {
            test: /\.css$/,
            //webpack在读取使用loader时候，从右向左    
            use: [ 'style-loader', 'css-loader' ]
          },{
            loader: "style-loader" // creates style nodes from JS strings
          }, {
            loader: "css-loader" // translates CSS into CommonJS
          }, {
            loader: "less-loader" // compiles Less to CSS
          },{
            test: /\.(png|jpg|gif)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 8192,
                  // 自定义img路径  
                  // img:要打包到的文件夹
                  // name:获取图片原来的名字
                  // hash:8防止图片每次冲突，使用hash
                  // ext:使用图片原来的扩展名
                  name:'img/[name].[hash:8].[ext]'  
                }
              }
            ]
          }
        ]
    }

}

加载图片>limit  将图片变异成base64字符串形式

 加载图片<limit 需要使用file-loader模块进行加载

7.es6转es5

npm install babel-loader babel-core babel-preset-env webpack

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}