学习视频:
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