Vue2前端模块化-USB迷|专注于互联网分享

Vue2前端模块化

一、Es6的模块化实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 加上了module就不用担心命名冲突的情况 --><!-- 但使用module的script标签默认发出cors跨域请求--><script src="index1.js" type="module"></script><script src="index2.js" type="module"></script>
</body>
</html>

加了module确实是可以防止两个js文件里的变量出现命名冲突

用匿名函数也可以解决命名冲突，但是如果要保存一些数据，不让数据在函数执行完就马上消失，可以在立即执行函数里return一个对象。

但如何将index1.js的数据导出到index2共享呢？

导出方式1

var flag = truefunction sum(num1 , num2) {return num1 + num2
}if(flag) {console.log(sum(20,30))
}
// 导出方式1 
// 导出flag sum使别的模块也能使用
export {flag,sum
}

导出方式1

// 1导入{}中定义的变量
import {flag,sum} from "./index1.js"
if(flag) {console.log('导入成功')console.log(sum(1,2))
}

导出方式2

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

导入方式2

// 2导入export定义的变量
import {num1,height} from "./index1.js"
console.log(height,num1)

导出方式3

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

导入方式3

// 3导入export中的function class
import {mul,Person} from "./index1.js"
console.log(mul(3,3));
const p = new Person()
p.run()

导出方式4

// 4. export default
const adress = '成都'
// default的只能有一个
export default adress

导入方式4

// 4.export default导入
// 这样就不用加大括号 而且可以随意起名字
import addr from "./index1.js"
console.log(addr)

导入方式5

// 5.全部统一导出
// aaa是自命名的一个对象
import * as aaa from "./index1.js"
console.log(aaa.flag)

二、webpack的使用：

①webpack的基本使用：

step1.新建src文件夹和dist文件夹、html文件

step2.将不同的js文件都放入src文件夹中：

info.js:

export const name = 'li';
export const age = 18;
export const height = 172;

main.js:

const {add,mul} = require('./mathUtils.js')
console.log(mul(5,6));
console.log(add(20,30));import {name,age,height} from "./info.js"
console.log(name);
console.log(age);
console.log(height);

mathUtils.js:

const {add,mul} = require('./mathUtils.js')
console.log(mul(5,6));
console.log(add(20,30));import {name,age,height} from "./info.js"
console.log(name);
console.log(age);
console.log(height);

安装好node.js/npm/webpack

以管理员身份运行终端，然后输入以下指令

webpack ./src/main.js --output-filename ./dist/bundle.js --output-path . --mode development

打包成功后dist文件夹中多了我们打包好的文件：

step3.在html文件中引入打包好的js文件：

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="./dist/bundle.js"></script>
</body>
</html>

就能够使用了

②webpack的配置：

如果每次打包都需要输入

webpack ./src/main.js --output-filename ./dist/bundle.js --output-path . --mode development

很麻烦

首次先将①的项目拷贝一份之后，我们开始webpack的配置。

在终端输入

npm init

输入package name等值后就能创建一个package.json文件

然后创建一个webpack.config.js文件：

path 我们要动态获取这个路径

_dirname当前路径，在当前路径后面拼接一个dist，变成绝对路径

然后输入webpack命令就可以打包成功！

但是开发中一般不会用webpack命令

package.json文件中script是写脚本的在script里加入命令：命令句就可以实现简便操作

配置之后，用npm run build 就可以完成打包！

定义脚本有一个好处是运行npm run build 用的是本地的webpack 不是全局的。

之前在终端中安装的webpack都是全局webpack，所以我们还需要本地安装webpack。

npm install webpack@5.70.0 --save-dev

③webpack的loader：

1. css loader/style loader

loader是webpack中一个非常核心的概念。

webpack用来做什么呢? 口在我们之前的实例中,我们主要是用webpack来处理我们写的js代码,并且webpack会自动处理js之间相关的依赖。

但是,在开发中我们不仅仅有基本的js代码处理,我们也需要加载css、图片,也包括一些高级的将ES6转成 ES5代码,将TypeScript转成ES5代码,将scss、less转成css ,将jsx、.vue文件转成js文件等等。

对于webpack本身的能力来说,对于这些转化是不支持的。

那怎么办呢?给webpack扩展对应的loader就可以啦。

loader使用过程:

步骤一: 通过npm安装需要使用的loader
步骤二:在webpack. config.js中的modules关键字下进行配置

大部分loader我们都可以在webpack的官网中找到,并且学习对应的用法。

官网地址：

step1.通过npm安装需要使用的loader

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

step2.在webpack. config.js中的modules关键字下进行配置

module.exports = {module: {rules: [{test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}]}
}

在src里创建一个css文件夹

然后只需要在main.js里引入css文件，webpack就能够通过loader将css一起打包

最后再npm run build打包一次

实现最后的样式

2.less loader:

用于打包less文件的loader：

step1.首先通过npm安装需要使用的loader：

npm install --save-dev less-loader less

step2.在webpack.config.js文件中对其进行配置

{test: /\.less$/,use: [{loader: "style-loader" // creates style nodes from JS strings}, {loader: "css-loader" // translates CSS into CommonJS}, {loader: "less-loader" // compiles Less to CSS}]}

写一个less文件

在main.js中对其进行加载：

require('../css/special.less')

通过npm run build之后就可以打包运行成功：

3.url loader:

用于打包图片的loader：

step1.npm安装：

npm install --save-dev url-loader

但是

step2.在webpack.config.js文件中对其进行配置:

limit是指图片的大小（kb*1024）

当图片大小小于limit时，会将图片编译成base64字符串形式，用url-loader加载。当加载的图片，大于limit时，需要使用file-loader模块进行加。

webpack5以上也不需要下载file-loader

在src下面创建img文件夹，并在css中引用这张图片：

step3.配置完成后输入npm run build 就可以在dist文件夹下找到打包后的图片：

但是这个时候对于超出limit的图片来说还是没有显示样式，需要在配置中加

 esModule: false

为了能让打包好的图片在统一的文件夹和有规范的名称，还可以在配置中添加：

最后输入npm run build 就能成功显示图片

④webpack配置Vue的过程：

step1：下载npm下载Vue

下载后会在node_modules中有一个Vue文件夹

在main.js中导入Vue

import Vue from 'vue/dist/vue.js'
new Vue({el: '#app',data: {massage: 'Hello webpack',}
})

<div id="app"><h2>{{massage}}</h2></div>

在webpack.config.js里添加resolve

 resolve: {alias: {'Vue$': 'vue/dist/vue.ems.js'}}

然后npm run build 就配置好了

⑤创建Vue时template和el的关系：

⑥webpack-Plugin的使用:

⑦webpack-HTMLWebpackPlugin的使用：

目前,我们的index.html文件是存放在项目的根目录下的。
我们知道,在真实发布项目时,发布的是dist文件夹中的内容,但是dist文件夹中如果没有index.html文件,那么打包的js等文件也就没有意义了。
所以,我们需要将index.html文件打包到dist文件夹中,这个时候就可以使用HtmlWebpackPlugin插件

HtmIWebpackPlugin插件的作用：

自动生成一个index.html文件(可以指定模板来生成)
将打包的js文件，自动通过script标签插入到body中

step1.安装HtmIWebpackPlugin插件：

npm install html-webpack-plugin --save-dev

step2.引入打包html文件

const HtmlWebpackPlugin = require('html-webpack-plugin')

step3.配置插件

new HtmlWebpackPlugin()