大前端--模块化、WebPack

学习视频：
https://www.bilibili.com/video/BV1BU4y147pS?p=27

模块化

简介
模块化产生的背景
随着网站逐渐变成“互联网应用程序”，嵌入网页的JavaScript代码越来越大，越来越复杂。

JavaScript模块化编程，已经成为一个迫切的需求，理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，，JavaScript不是一种模块化编程语言，它不支持“类”（class），包（package）等概念，也不支持“模块”（module）。

模块化规范

• CommonJS规范
• ES6模块化规范

CommonJS规范

每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

1、创建module文件夹。全程在VSCode操作。

2、创建 四则运算.js

//工具类
const sum = function(a,b){
    return a+b;
}
const sub = function(a,b){
    return a-b;
}
const mul = function(a,b){
    return a*b;
}
const di = function(a,b){
    return a/b;
}
//导出给别人使用
module.exports = {
    // sum: sum,
    // sub: sub,
    sum,
    sub,
    mul,
    di
}

创建 导入测试.js

// require
const c = require('./四则运算.js');

//必须要在四则运算.js中导出了，这边才能使用
console.log(c.sum(7,8));
console.log(c.sub(55,8));
console.log(c.di(654,2));
console.log(c.mul(7,87));

运行命令：node .\导入测试.js 。运行结果：

ES6模块化规范

ES6使用 export 和 import 来导出、导入模块
1、创建 module-ES6 文件夹

2、创建 userApi.js 文件，做导出模块

export function getList(){
    //真实业务中，异步获取数据
    console.log("获取数据列表");
}
export function save(){
    //保存数据
    console.log("保存数据");
}

3、创建 userTest.js 文件，做导入模块

//导入模板
import {getList,save} from './userApi.js';
//使用
getList();
save();
//默认不支持ES6语法，得初始化工程才可以。

先初始化工程，不然直接执行会报错

初始化：npm init -y

然后在package.json配置 脚本命令 和 创建 .babelrs

运行脚本命令还需要创建src文件夹

脚本命令 "build": "babel src -d dist"

.babelrs

再安装解码器：npm install --save-dev babel-preset-es2015

最后运行：npm run build

运行后会生成dist文件和一些依赖

可以执行一下dist目录下的userTest.js

可以看出这个需要babel支持。
但是这个比较麻烦，每次都需要导入模块。

所以ES6出台了新的东西
新建module-ES6-2，将module-ES6中的src下的js文件复制到module-ES6-2中

改写userApi.js

//实际开发中就经常是这种代码
export default{
    getList(){
        //真实业务中，异步获取数据
        console.log("获取数据列表");
    },
    save(){
        //保存数据
        console.log("保存数据");
    }
}

// export function getList(){
//     //真实业务中，异步获取数据
//     console.log("获取数据列表");
// }
// export function save(){
//     //保存数据
//     console.log("保存数据");
// }

改写userTest.js

//ES6语法，使用对象导入模板
import user from './userApi.js';
//导入模板
// import {getList,save} from './userApi.js';
//使用
user.getList();
user.save();

为了避免重复上面的安装解码器等一系列的操作，直接把两个js文件复制到module-ES6的src中
然后直接再build一下

再回到 module-ES6/src/userTest.js看

'use strict';
var _userApi = require('./userApi.js');
var _userApi2 = _interopRequireDefault(_userApi);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
//导入模板
// import {getList,save} from './userApi.js';
//使用
_userApi2.default.getList(); //ES6语法，使用对象导入模板
_userApi2.default.save();
//默认不支持ES6语法，得初始化工程才可以。

再次运行的结果和上面的一样打印出来两行文字。

WebPack

什么是WebPack
WebPack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
从图中我们可以看出，WebPack可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

JS打包
打开命令窗口，全局安装webpack：cnpm install -g webpack webpack-cli

查看是否安装成功：webpack -v

1、创建webpackStudy
初始化项目：npm init -y

定义src文件夹，在里面新建util.js文件、common.js文件和入口文件main.js文件

util.js

//求和,相加
exports.add = (g,h)=> g + h;

common.js

//导出
exports.info = function(str){
    //控制台输出
    console.log(str);
    //浏览器输出
    console.log(str);
}

main.js

//导入util.js
const util = require("./util");
//导入common.js
const common = require("./common");
//打印信息，往控制台输出和往浏览器输出
common.info("Console export," + util.add(51346,25634));

新建webpack.config.js文件

//导入path模块  nodejs内置模块
const path = require("path");
//定义js打包规则
module.exports = {
    //入口函数，从哪里开始进行编译打包
    entry: "./src/main.js",
    //编译成功后把内容输出到哪里去
    output: {
        //定义输出的指定的目录__dirname当前项目根目录，产生一个dist文件夹
        path:path.resolve(__dirname,"./dist"),
        //合并的js文件存储在dist/bundle.js文件中
        filename:"bundle.js"
    }
}

运行 webpack，但是报错了

解决方法

首先以管理员身份运行VSCode，如果不执行这一步就会报另外一个错误

这个报错就是没有修改注册表的权限。这是由于PowerShell执行策略问题

然后修改运行权限：set-ExecutionPolicy RemoteSigned

执行完成查看 dist/bundle.js，出现以下内容

(()=>{var o={648:(o,n)=>{n.info=function(o){console.log(o),console.log(o)}},891:(o,n)=>{n.add=(o,n)=>o+n}},n={};function r(e){var t=n[e];if(void 0!==t)return t.exports;var s=n[e]={exports:{}};return o[e](s,s.exports,r),s.exports}(()=>{const o=r(891);r(648).info("Console export,"+o.add(51346,25634))})()})();

新建 dist/index.html 文件

<!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="bundle.js"></script>
</body>
</html>

右键运行之后去浏览器查看结果

webpack帮助文档：webpack -h
webpack监听：webpack -w
CSS打包
1、安装style-loader和css-loader

Webpack 本身只能处理JavaScript模块，如果要处理其他类型的文件，就需要使用loader进行转换

Loader可以理解为 模块和资源的转换器

首先需要安装相关Loader插件

• css-loader ： 将css装载到JavaScript
• style-loader ： 让JavaScript认识css

安装命令：npm install --save-dev style-loader css-loader

安装完成后会在package.json中出现这两个依赖

2、修改webpack.config.js
在output后面添加一段代码

 module:{
        rules:[{
            test:/\.css$/,//把项目中所有的 .css 结尾的文件进行打包
            use:["style-loader","css-loader"]
        }]
    }

3、创建 src/style.css

body{
    background: goldenrod;
    font-size: 78px;
    color: black;
}

4、修改main.js，在第一行引入 style.css

//导入css
require("./style.css");

5、浏览器中查看index.html，看背景颜色是否改变

Vue-element-admin

vue-element-admin是一个后台前端解决方案，它基于vue和element-ui实现，它使用了罪行的前端技术栈，内置了i18国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型，相信不管你的需求是什么，本项目都能帮助到你。

官网：https://panjiachen.github.io/vue-element-admin-site/zh/guide/
运行工程和编译工程

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 不建议用cnpm安装。下面解决速度慢问题
npm install --registry=https:registry.npm.taobao.org

完成之后就会看到vue-element-admin已经被下载下来了。

用VSCode打开后，首先先把依赖下载下来：npm install

但是报错了，因为本地生成的SSH keys添加到github里面，，这个生成的SSH keys 是带有密码的

克隆别的项目下来，没有对方的邮箱，所以…

npm ERR! code 128
npm ERR! command failed
npm ERR! command git --no-replace-objects ls-remote ssh://git@github.com/nhn/raphael.git
npm ERR! git@github.com: Permission denied (publickey).
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.

npm ERR! A complete log of this run can be found in:  

解决方法：https://cloud.tencent.com/developer/article/1883101