title: magiskdate: 2019-12-15 11:10:15

tags: android

magisk

Magisk manager is a magic mask to alter system systemless-ly.

Installing Magisk will give you ROOT, a super powerful Systemless Interface,

Magisk Modules support, and hide from tons of integrity tests like SafetyNet!

What is Magisk?

Magisk is a great open-source root solution for Android devices which is developed by topjohnwu[https://forum.xda-developers.com/member.php?u=4470081], offering a “Systemless Interface”, allowing easy modification of your favourite device with peace of mind. Magisk is a module based application, so its configuration can be as individual as the member applying them. Many modules exist for Magisk, providing all sorts of modifications, such as cloaking your device from SafetyNet.

Highlights

Open Source:

100% open source and easy to build on all Google supported platforms.

Magic Mount:

Modify system (vendor) without tampering the partitions.

MagiskSU:

Unleash your device’s root access.

MagiskHide:

Hide Magisk from detections: Google SafetyNet, enterprise / bank system integrity checks, game tamper checks.

Resetprop:

Modify or delete any system properties, including read-only props.

Magisk Modules:

Install Magisk Modules from the community driven Magisk Module Repo.Many custom modules for Magisk,like Fonts,Audio Mod,DNS.

What is Magisk Manager?

Magisk Manager is the application same as SuperSU which is pre-installed on your device after you have rooted your Android device. If you want to use the magisk manager you can unroot your device and then root it with the help flashing Magisk-v20.zip or else you can install the magisk manager application and do the system less rooting on your device.

There are many questions raised, and people has a query that is How to root with magisk? The rooting procedure is simple, and you need a custom recovery installed on your device. If you have the custom recovery, then you can root your Android device by flashing the Magisk-v20.zip file.

Magisk and superSu

If you root your device with the help of magisk, then the magisk won’t do any changes in your system files. Magisk will modify the boot.img to magisk.img. Magisk won’t add any files in your system files.

When SuperSU roots your device, it will do the changes in the System files and also adds some files in the system partition. If you install SuperSU, you won’t be getting any OTA updates or any financial application won’t work on your device.

guide

Before Installing Magisk,you must Unlocking Bootloader.

Download Magisk Zip and Magisk Manager APK

You can usually download Magisk from the original development thread at XDA. But it only provides Magisk download link for the latest version. However, sometimes, the latest version isn’t the best version for you. For instance, a newer version of Magisk may not be able to hide from an app like Google Pay which is actually known to run into problems despite using MagiskHide.

Using an older version of Magisk that you know works for you might be a temporary solution until it’s fixed. In that case, though, you’re out of luck. But not anymore. You can download all Magisk versions from below. The list below is comprehensive and contains all Magisk versions since it was released publicly.

Below, you will find oldest to the latest version of Magisk zip for Android Nougat, Oreo, and Pie and download them directly from the Magisk Github repository. Just click the direct Magisk download links below. Moreover, we’ve also listed the compatible version of Magisk Manager and Magisk Uninstaller for each Magisk release. You can use Magisk Uninstaller zip file to remove Magisk from your Android device.

How to install Magisk?

If you don’t have a Android device with a TWRP recovery,you can refer to Plan A.But I suggest you install it,it’s very userful.

If you have a Android device with a TWRP recovery,you can refer to Plan B.

If you are using a Huawei device running EMUI 8 and higher, please check its section.

If you are using a Samsung device that is launched with Android 9.0 (new devices in 2019), please check its section.

Plan A

1. Download Magisk Manager on your Android device.
2. Install the application, and you might get an unknown source warning. You need to turn on Unknown Sources to turn it on, click on “Settings”.
3. Now, try to repeat the installation process again. Try installing the application and open it.
4. If you have already installed the Chainfire SuperSU on your device, then you need to grant the root permission.
5. Now, click on the Install button to install the magisk on your device.
6. If you will click on Install button you will see that it will ask you to select method.
7. Just click on Direct Install if you want to directly install the file on your phone without using custom recovery on your phone, or you can click on Download Zip File Only.
8. Now, if the download is the done. Magisk Manager will automatically install the file on your phone.

Plan B

1. Download the Magisk zip file.
2. Place the zip file in your internal storage. Make sure that you remember the proper location of the zip file.
3. Reboot your phone into recovery ensure that you have a custom recovery such as TWRP is installed on your phone.
4. Now, click on the Install button in the TWRP recovery.
5. Navigate the Magisk-v20.zip on your internal storage or SD card.
6. Now, install the zip file on your device and wait till it is getting installed on your device.
7. You have successfully flashed the Magisk-v20.zip on your device.
8. Reboot your phone and see if it works on your device.
9. Download the magisk manager application from the link given above.
10. Install the application by following the above procedure.
11. Open it and then you will see magisk is installed on your Android device.

How to use Magisk Hide?

Magisk Hide is the feature which is available in the Magisk Manager application and if you want to hide the root permission for the particular banking application.

You can turn the Magisk hide option from the settings of the magisk application then you can easily enjoy your favorite app without any issues.

If you want to activate the Magisk Hide option, then you can follow the below tutorial, and you can hide the root permission on your device.

1. First, check the application which is not working on your rooted Android device.
2. Open Magisk on your device and click on the Menu button.
3. Now, Click on the Settings to turn on the magisk hide option.
4. Now, scroll down and enable the Magisk Hide option.
5. Press the Menu key again and click on the “Magisk Hide” option.
6. Now, you need to select the application from which you need to hide the root.
7. Open your banking application and then that’s it. You can run the banking application on your device now.

Huawei

Huawei devices using Kirin processors have a different partitioning method from most common devices. Magisk is usually installed to the boot partition of the device, however Huawei devices do not have this partition. Depending on what EMUI version your device is running, the instructions will be slightly different.

Obtain Stock Images

Huawei does not release official factory images, however most firmware zips can be downloaded from the Huawei Firmware Database. To extract images from UPDATE.APP in the zip, you have to use Huawei Update Extractor (Windows only!)

EMUI 8

For EMUI 8 devices, your device has a partition named ramdisk, which is where Magisk is going to be installed.

If you plan to use custom recoveries, simply follow the instructions for custom recovery and you’re all set.

If you plan not to use custom recoveries, you will have to extract RAMDISK.img from your firmware. Follow the instructions for boot image patching above, but use the RAMDISK.img file instead of a boot image.

To flash the patched image to your device, here is the fastboot command:

fastboot flash ramdisk /path/to/magisk_patched.img

Be aware you are flashing to ramdisk, not boot!

EMUI 9 or Higher

For EMUI 9+ devices, the ramdisk partition no longer exists. As a workaround, Magisk will be installed to the recovery_ramdisk partition. Please read the Magisk in Recovery section before following the instructions below!

Note: As I tested on my Honor View 10, Huawei’s kernel does not seem to be able to capture key button press events in early boot, so long pressing Volume Up does NOT boot to recovery on my device. Your experience may vary.

If you plan to use custom recoveries, simply follow the instructions for custom recovery and you’re all set.

Warning: Magisk will overwrite the custom recovery.

If you plan not to use custom recoveries, you will have to extract RECOVERY_RAMDIS.img from your firmware. Follow the instructions for boot image patching above, but use the RECOVERY_RAMDIS.img file instead of a boot image.

To flash the patched image to your device, here is the fastboot command:

fastboot flash recovery_ramdisk /path/to/magisk_patched.img

Be aware you are flashing to recovery_ramdisk, not boot!

Samsung (System-as-root)

If your device is NOT launched with Android 9.0 or higher (released after 2019), you are reading the wrong section.

Before Installing Magisk

Your device is non-A/B and uses system-as-root, so Magisk will be installed to the recovery partition of your device. Please read the Magisk in Recovery section!

Installing Magisk WILL trip KNOX

Installing Magisk for the first time REQUIRES a full data wipe, backup before continue

You have to have your bootloader unlocked before following the instructions

Unlocking Bootloader

Normally I wouldn’t provide instructions for this, but since things had changed drastically from previous Samsung devices, and there are some caveats, I figure this would be helpful.

Allow bootloader unlocking in Developer options → OEM unlocking

Reboot your device to download mode. Either use adb reboot download, or use the key combo for your device.

Long press volume up to unlock the bootloader. This will wipe your data and automatically reboot.

Just when you think the bootloader is unlocked, it is actually not! Samsung introduced VaultKeeper, meaning the bootloader will reject any unofficial partitions before VaultKeeper explicitly allows it.

Go through the initial setup. Skip through all the steps since data will be wiped again later when we are installing Magisk. Connect the device to internet in the setup!

Enable developer options, and confirm that the OEM unlocking option exists and grayed out! The VaultKeeper service will unleash the bootloader after it confirms that the user has the OEM unlocking option enabled.

Your bootloader now accepts unofficial images in download mode.

Instructions

Download the firmware for your device.

Unzip the firmware and copy the AP tar file to your device. It is normally named as AP_[device_model_sw_ver].tar.md5

Install the latest Magisk Manager

In Magisk Manager: Install → Install → Select and Patch a File and select the AP tar file.

Magisk Manager will patch the whole firmware file and store the output to [Internal Storage]/Download/magisk_patched.tar

Copy the patched file to your PC with adb pull /sdcard/Download/magisk_patched.tar. Do not use MTP as it is reported to corrupt files.

Reboot to download mode, and flash magisk_patched.tar as AP in Odin, together with the BL, CP and HOME_CSC files. Never flash only an AP file, as Odin can shrink your /data file-system if you do.

Important: Uncheck “Auto Reboot” in Options!

Magisk is now successfully flashed to your device! But there are still several steps before you can properly use the device.

We now want to boot into the stock recovery to factory reset our device.

Full data wipe is mandatory! Do not skip this step.

Press Power + Volume Down to exit download mode. As soon as the screen turns off, immediately press the combo key to boot to recovery (e.g. on the S10 it is Power + Bixby + Volume Up). Since we want to boot into stock recovery, continue pressing the volume up button until you see the stock recovery screen.

Use volume buttons to navigate through the stock recovery menu, and the power button to select an option. Choose Wipe data/factory reset to wipe the data of the device.

This time, we can finally boot to the system with Magisk. Select Reboot system now, and immediately press the combo key to recovery. After seeing the bootloader warning screen, release all buttons so it can boot to the system.

The device will automatically reboot for the first time it boots. This is completely normal and done by design.

After the device is booted up, do the usual initial setup. The following steps will need an internet connection.

You shall see Magisk Manager in your app drawer; if not, manually install the APK you downloaded in step 3 and continue to the next step. The app would be a stub and it shall automatically upgrade to the full Magisk Manager when you open it.

Magisk Manager will ask to do additional setups. Let it do its job and the app will automatically reboot your device.

Voila! Enjoy Magisk :)

Additional Info

Magisk actually patches 3 partitions on your device:

vbmeta: replace with empty vbmeta image to disable partition verification

boot: remove the signature of the image to prevent soft bricks

recovery: this is where Magisk is actually installed

Never, ever try to restore either of the 3 images mentioned back to stock! You can easily brick your device by doing so, and the only way out is to do full Odin restore following with factory reset. Just don’t do it.

If you want to upgrade your device, never flash the stock AP tar file with the reasons mentioned above. Always pre-patch the firmware before flashing in Odin.

If you don’t need to patch the full firmware, you can manually create a tar file with at least vbmeta.img, boot.img, and recovery.img to let Magisk Manager patch your images in the proper way.

Magisk Modules

title: 前端工程化

date: 2019-09-01 14:26:50

tags: javascript

categories:  # 这里写的分类会自动汇集到 categories 页面上,分类可以多级

• JS # 一级分类
• 前端工程化 # 二级分类

模块化初探

模块化系统的风格

模块化的价值

最主要的目的：

• 解决命名冲突
• 依赖管理

其他价值:

• 提高代码可读性
• 代码解耦,提高复用性

<script>标签风格

1
2
3

<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="module3.js"></script>

各个模块把接口暴露给全局对象,比如 window.各个模块通过全局对象进行相互访问

出现的问题:

1. 全局对象的冲突
2. 加载的顺序很重要
3. 开发者需要解决模块的依赖问题
4. 在大项目中模块非常多难以维护

CommonJs: 同步的 require

CommonJs 是 Node 独有的规范，浏览器中使用就需要用到 Browserify 解析了。

使用同步的require方法来加载依赖和返回暴露的接口.一个模块可以通过exports对象添加属性,或者设置module.exports的值来描述暴露对象.

1
2
3
4

require("moudle");
require("../file.js");
exports.doStuff = function () {};
moudle.exports = someValue;

优点:

1. 服务端代码可以被复用.
2. npm 有大量的代码
3. 使用方便

缺点:

1. 阻塞调用无法在网络环境应用,网络请求是异步的
2. 不能并行require多个模块

CommonJS 规范

1. 在一个模块中,存在一个自由的变量”require”,它是一个函数。

这个”require”函数接收一个模块标识符。

“require”返回外部模块所输出的 API。 2. 在一个模块中,会存在一个名为”exports”的自由变量,它是一个对象,模块可以在执行的时候把自身的 API 加入到其中。 3. 模块必须使用”exports”对象来做为输出的唯一表示。

AMD 规范: 异步的 require

AMD 主要解决两个问题:

1. 多个 js 文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器
2. js 加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长

requireJS 语法

RequireJS 遵循 AMD 规范,用于解决命名冲突和文件依赖的问题.

requireJS 定义了一个函数 define,它是全局变量,用来定义模块

define(id?, dependencies?, factory);

1. id：可选参数,用来定义模块的标识,如果没有提供该参数,脚本文件名(去掉拓展名)
2. dependencies：是一个当前模块依赖的模块名称数组
3. factory：工厂方法,模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值

在页面上使用 require 函数加载模块

require([dependencies], function(){});

require()函数接受两个参数:

1. 第一个参数是一个数组,表示所依赖的模块
2. 第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块.

require()函数在加载依赖的函数的时候是异步加载的,这样浏览器不会失去响应,它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。

1
2
3
4
5
6

require(["moudle", "../file"], function (moudle, file) {
  /* ... */
});
define("moudle", ["dep1", "dep2"], function (d1, d2) {
  return someExportedValue;
});

import和export的区别

以前:

CommonJS（服务器） 和 AMD（浏览器）规范各自实现了运行时加载模块的方法（没办法在编译时做“静态优化”）。

1
2
3
4
5
6
7

// CommonJS模块
let { stat, exists, readFile } = require("fs");
// 等同于
let _fs = require("fs");
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

现在：

ES6：一个模块就是一个文件，export/import命令可以出现在模块的任何位置，只要处于模块顶层就可以。

通过import和export实现静态加载（编译时加载），服务端和浏览器通用。

1
2

// ES6模块
import { stat, exists, readFile } from "fs";

export：如果你希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量

1
2
3
4
5

// profile.js
var firstName = "Michael";
var lastName = "Jackson";
var year = 1958;
export { firstName, lastName, year };

还可以输出函数和 class 类：

1
2
3

export function multiply(x, y) {
  return x * y;
}

还可以改个名字输出：

1
2
3
4
5
6
7

function v1() { ... }
function v2() { ... }
export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

需要特别注意的是，export 命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

export 语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

CommonJS 模块输出的是值的缓存，不存在动态更新。

import：加载模块

1
2
3
4
5

// main.js
import { firstName, lastName, year } from "./profile";
function setName(element) {
  element.textContent = firstName + " " + lastName;
}

可以改名字：

1

import { lastName as surname } from "./profile";

注意，import 命令具有提升效果，会提升到整个模块的头部，首先执行。import 命令是编译阶段执行的，在代码运行之前。

由于 import 是静态执行，所以不能使用表达式和变量。

会执行加载的模块：

1

import "lodash"; //仅仅执行lodash模块，但是不输入任何值。多次引入同一个模块仅执行一次。

整体加载所有的模块：

1

import * as circle from "./circle";

export default：为模块指定默认输出，引用的时候不用知道输出的到底是什么，可以指定任意名字。

需要注意的是，这时 import 命令后面，不使用大括号。一个模块只能有一个默认输出。

1
2
3
4
5
6
7

// export-default.js
export default function () {
  console.log("foo");
}
// import-default.js
import customName from "./export-default";
customName(); // 'foo'

同时引用默认模块和其他模块：

1
2
3
4
5
6
7
8
9
10

//输出
export default function (obj) {
  // ···
}
export function each(obj, iterator, context) {
  // ···
}
export { each as forEach };
//对应的加载
import _, { each, each as forEach } from "lodash";

ES6 模块加载 CommonJS 模块：

1
2
3
4
5
6
7
8
9
10
11

//commonjs模块：
// a.js
module.exports = {
  foo: "hello",
  bar: "world",
};
// 等同于
export default {
  foo: "hello",
  bar: "world",
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//es6加载上面的模块：
// 写法一
import baz from "./a";
// baz = {foo: 'hello', bar: 'world'};
// 写法二
import { default as baz } from "./a";
// baz = {foo: 'hello', bar: 'world'};
// 写法三
import * as baz from "./a";
// baz = {
//   get default() {return module.exports;},
//   get foo() {return this.default.foo}.bind(baz),
//   get bar() {return this.default.bar}.bind(baz)
// }

CommonJS 加载 ES6 模块：通过import()函数

1
2
3
4

// es6.mjs
let foo = { bar: "my-default" };
export default foo;
foo = null;

1
2
3
4
5
6
7
8
9

// commonjs.js
const es_namespace = await import("./es");
// es_namespace = {
//   get default() {
//     ...
//   }
// }
console.log(es_namespace.default);
// { bar:'my-default' }

import 和 require 的区别

#module.exports 和 export default 的区别

webpack

webpack 是收把项目当作一个整体,通过一个给定的的主文件,webpack 将从这个文件开始找到你的项目的所有依赖文件,使用 loaders 处理它们,最后打包成一个或多个浏览器可识别的 js 文件.

初始化

1. 新建一个文件夹,cd 到它的目录下.执行npm init -y命令
2. 执行npm install --save--dev webpack命令安装(也可以全局安装)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/配置
touch webpack.config.js
vi  webpack.config.js
//在里面写以下内容
/*
const path = require('path');
module.exports = {
  entry: './src/index.js', //入口
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};*/

//创建文件
touch src/index.js

//运行webpack
npx webpack  //这时会多出dist目录,里面有bundle.js文件

2.使用

1.在 index.js 里写

1
2
3
4
5
6

console.log(1)

//再运行webpack:
npx webpack

//再看bundle.js,这时会多出来一行console.log(1)

2.安装 babel-loader 自动转换 es6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

//安装v6,命令行
npm install babel-loader babel-core babel-preset-env webpack

//将这个复制到webpack的配置文件webpack.config.js里,加在output的下面
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }
  ]
}

//加在output的下面,复制完后成这样
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }
  ]
}
};

运行 npx webpack

若出现 can’t find ‘…’或 can’t resolve ‘…’的报错,则安装省略号里的东西 npm i ‘省略号’

注意：若是 Couldn’t find preset “env”,不要安装 env,而是 npm i babel-preset-env

3.使用 babel

1
2
3

//当你在写index.js里写
let a = 1;
//它就会帮你自动转换成es5了

NPM 脚本(NPM Scripts)

在 package.json 文件中写入 npm 脚本,就可以使用npm run build替代npx命令.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9",
      "lodash": "^4.17.5"
    }
  }

管理资源(css,图片之类)

加载 CSS

1. 需要先安装 style-laoder 和 css-loader

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

2. 然后在webpack.config.js文件里添加规则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
+   module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader'
+         ]
+       }
+     ]
+   }
  };

webpack 根据正则表达式,来确定应该查找哪些文件,并将其提供给指定的 loader。在这种情况下,以 .css 结尾的全部文件,都将被提供给 style-loader 和 css-loader。

这使你可以在依赖于此样式的文件中import './style.css'。现在,当该模块运行时,含有 CSS 字符串的<style>标签,将被插入到 html 文件的 <head>中。

加载图片

1. 安装npm install --save-dev file-loader插件
2. 配置webpack.config.js文件

现在,当你 import MyImage from './my-image.png',该图像将被处理并添加到 output 目录,

并且 MyImage 变量将包含该图像在处理后的最终 url。当使用 css-loader 时,如上所示,

你的 CSS 中的url('./my-image.png') 会使用类似的过程去处理。loader 会识别这是一个本地文件,

并将 './my-image.png'路径,替换为输出目录中图像的最终路径。

html-loader 以相同的方式处理 <img src="./my-image.png" />。

3. 在 src 文件夹下创建 icon.png.

4. 修改src/index.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

  import _ from 'lodash';
  import './style.css';
+ import Icon from './icon.png';

  function component() {
    var element = document.createElement('div');

    // Lodash,现在由此脚本导入
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');

+   // 将图像添加到我们现有的 div。
+   var myIcon = new Image();
+   myIcon.src = Icon;
+
+   element.appendChild(myIcon);

    return element;
  }

  document.body.appendChild(component());

5. src/style.css中引入图片

1
2
3
4

  .hello {
    color: red;
+   background: url('./icon.png');
  }

6. 重新构建npm run build

Glup

简介

它是一款 nodejs 应用。

它是打造前端工作流的利器,打包、压缩、合并、git、远程操作…,

简单易用

无快不破

高质量的插件

安装

安装 gulp

npm install -g gulp

如果报Error: EACCES, open '/Users/xxx/xxx.lock错误。

先执行：sudo chown -R $(whoami) $HOME/.npm

如果使用 npm 安装插件太慢(被墙),

可执行 npm install -g cnpm --registry=https://registry.npm.taobao.org

先安装 cnpm, 之后再安装插件时用 cnpm 安装cnpm install gulp

2. 安装各种插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

npm install --save gulp            //本地使用gulp
npm install --save gulp-imagemin   //压缩图片
npm install --save gulp-minify-css //压缩css
npm install --save gulp-ruby-sass  //sass
npm install --save gulp-jshint     //js代码检测
npm install --save gulp-uglify     //js压缩
npm install --save gulp-concat     //文件合并
npm install --save gulp-rename     //文件重命名
npm install --save png-sprite      //png合并
npm install --save gulp-htmlmin    //压缩html
npm install --save gulp-clean      //清空文件夹
npm install --save browser-sync    //文件修改浏览器自动刷新
npm install --save gulp-shell      //执行shell命令
npm install --save gulp-ssh        //操作远程机器
npm install --save run-sequence    //task顺序执行

或者根据 package.json 自动安装。把 package.json 拷贝到自己的工程目录下,进入目录,执行:npm install

语法 gulp API

gulp.src(globs[,options])

1
2
3
4
5

gulp
  .src("client/templates/*.jade")
  .pipe(jade())
  .pipe(minify()) //压缩文件
  .pipe(gulp.dest("build/minified_templates"));

作用: 输出符合所提供的匹配模式或数组的文件.

globs 类型: string 或 Array

所要读取的 glob 或者包含 globs 的数组.可以是地址

options 类型:object

额外的选项参数

gulp.dest(path[,options])

1
2
3
4
5
6

gulp
  .src("./client/templates/*.jade")
  .pipe(jade())
  .pipe(gulp.dest("./build/templates"))
  .pipe(minify())
  .pipe(gulp.dest("./build/minified_templates"));

文件被 pipe 进来,dest 生成或者写入一个文件.

path

文件将被写入的路径(输出目录)。

gulp.task(name[,deps],fn)

定义一个实现任务

1
2
3

gulp.task('somename', function(){
  //任务
})

name

任务名字

deps 类型: array

一个包含任务列表的数组,这些任务会在你当前运行任务之前完成.

1
2
3

gulp.task('mytask', ['array', 'of', 'task', 'names'], function(){
  //任务
})

fn

该函数定义任务所要执行的一些操作。通常来说,它会是这种形式：gulp.src().pipe(someplugin())。

gulp.watch(glob[, opts], tasks)

监视文件,并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射(emit) change 事件。

1
2
3
4
5
6

var watcher = gulp.watch("js/**/*.js", ["uglify", "reload"]);
watcher.on("change", function (event) {
  console.log(
    "File " + event.path + " was " + event.type + ", running tasks..."
  );
});

gulp 使用实例

范例 1. 压缩合并

demo1 目录结构如下。把 demo1 中的 index.html 压缩,把 src 里面的 less 编译、合并、压缩、重命名、存储到 dist。src 里面的图片压缩、合并存储到 dist。src 里面的 js 做代码检查,压缩,合并,存储到 dist。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

+ demo1
    + dist
        + css
            - merge.min.css
        + js
            - merge.min.js
        + imgs
            - 1.png
            - 2.png
        - index.html
    + src
        + css
            - a.css
            - b.css
        + js
            - a.js
            - b.js
        + imgs
            - 1.png
            - 2.png
        - index.html

创建 gulpfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

var gulp = require("gulp");

// 引入组件
var minifycss = require("gulp-minify-css"), // CSS压缩
  uglify = require("gulp-uglify"), // js压缩
  concat = require("gulp-concat"), // 合并文件
  rename = require("gulp-rename"), // 重命名
  clean = require("gulp-clean"), //清空文件夹
  minhtml = require("gulp-htmlmin"), //html压缩
  jshint = require("gulp-jshint"), //js代码规范性检查
  imagemin = require("gulp-imagemin"); //图片压缩

gulp.task("html", function () {
  return gulp
    .src("src/*.html")
    .pipe(minhtml({ collapseWhitespace: true })) //html压缩
    .pipe(gulp.dest("dist"));
});

gulp.task("css", function (argument) {
  gulp
    .src("src/css/*.css")
    .pipe(concat("merge.css")) // CSS压缩
    .pipe(
      rename({
        suffix: ".min", // 重命名
      })
    )
    .pipe(minifycss()) // CSS压缩
    .pipe(gulp.dest("dist/css/"));
});
gulp.task("js", function (argument) {
  gulp
    .src("src/js/*.js")
    .pipe(jshint()) //js代码规范性检查
    .pipe(jshint.reporter("default"))
    .pipe(concat("merge.js")) // 合并文件
    .pipe(
      rename({
        suffix: ".min", // 重命名
      })
    )
    .pipe(uglify()) // js压缩
    .pipe(gulp.dest("dist/js/"));
});

gulp.task("img", function (argument) {
  gulp
    .src("src/imgs/*")
    .pipe(imagemin()) //图片压缩
    .pipe(gulp.dest("dist/imgs"));
});

gulp.task("clear", function () {
  gulp.src("dist/*", { read: false }).pipe(clean()); //清空文件夹
});

gulp.task("build", ["html", "css", "js", "img"]);

最后命令行gulp build;

可实现 src 目录下的 html 压缩,css、js 合并压缩,图片压缩,最后放入 dist 目录下

范例 2. 监控变动自动同步

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

var gulp = require("gulp");

// 引入组件
var browserSync = require("browser-sync").create(); //用于浏览器自动刷新
var scp = require("gulp-scp2"); //用于scp到远程机器
var fs = require("fs");

gulp.task("reload", function () {
  browserSync.reload();
});

gulp.task("server", function () {
  browserSync.init({
    server: {
      baseDir: "./src",
    },
  });

  gulp.watch(["**/*.css", "**/*.js", "**/*.html"], ["reload", "scp"]);
});

gulp.task("scp", function () {
  return gulp
    .src("src/**/*")
    .pipe(
      scp({
        host: "121.40.201.213",
        username: "root",
        privateKey: fs.readFileSync("/Users/wingo/.ssh/id_rsa"),
        dest: "/var/www/fe.jirengu.com",
        watch: function (client) {
          client.on("write", function (o) {
            console.log("write %s", o.destination);
          });
        },
      })
    )
    .on("error", function (err) {
      console.log(err);
    });
});

命令行执行:

1
2

gulp scp;  // 可把本地开发环境代码拷贝到服务器
gulp server; //可在本地创建服务器,本地开发浏览器立刻刷新

范例 3.   监控项目文件变动,自动压缩、合并、打包、添加版本号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

html

</html>
<head>

<!-- build:css css/merge.css -->
  <link href="css/a.css" rel="stylesheet">
  <link href="css/b.css" rel="stylesheet">
<!-- endbuild -->

</head>
<body>

<p>demo1-工程化手动版</p>

<!-- build:js js/merge.js -->
  <script type="text/javascript" src="js/a.js"></script>
  <script type="text/javascript" src="js/b.js"></script>
<!-- endbuild -->

</body>
</html>

设置 gulpfile.js 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

var gulp = require("gulp");
var rev = require("gulp-rev"); //添加版本号
var revReplace = require("gulp-rev-replace"); //版本号替换
var useref = require("gulp-useref"); //解析html资源定位
var filter = require("gulp-filter"); //过滤数据
var uglify = require("gulp-uglify");
var csso = require("gulp-csso"); //css优化压缩
var clean = require("gulp-clean");

gulp.task("index", ["clear"], function () {
  var jsFilter = filter("**/*.js", { restore: true });
  var cssFilter = filter("**/*.css", { restore: true });

  var userefAssets = useref.assets();

  return gulp
    .src("src/index.html")
    .pipe(userefAssets) // Concatenate with gulp-useref
    .pipe(jsFilter)
    .pipe(uglify()) // Minify any javascript sources
    .pipe(jsFilter.restore)
    .pipe(cssFilter)
    .pipe(csso()) // Minify any CSS sources
    .pipe(cssFilter.restore)
    .pipe(rev()) // Rename the concatenated files
    .pipe(userefAssets.restore())
    .pipe(useref())
    .pipe(revReplace()) // Substitute in new filenames
    .pipe(gulp.dest("dist"));
});

gulp.task("clear", function () {
  gulp.src("dist/*", { read: false }).pipe(clean());
});

范例 4. 本地 shell 命令, 远程 shell, 任务顺序执行…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

var gulp = require("gulp");

var shell = require("gulp-shell");
var runSequence = require("run-sequence");
var fs = require("fs");
var GulpSSH = require("gulp-ssh");

//shell操作,
gulp.task(
  "git",
  shell.task(["git add .", 'git commit -am "dd"', "git push -u origin dev"])
);
gulp.task(
  "clear",
  shell.task(['find . -name ".DS_Store" -depth -exec rm {} \\;'])
);

//操作远程主机
var gulpSSH = new GulpSSH({
  ignoreErrors: false,
  sshConfig: {
    host: "121.40.201.213",
    port: 22,
    username: "root",
    privateKey: fs.readFileSync("/Users/wingo/.ssh/id_rsa"),
  },
});

gulp.task("remote", function () {
  return gulpSSH.shell([
    "cd /var/www/fe.jirengu.com",
    "git pull origin dev",
    "rm -rf _runtime",
  ]);
});

gulp.task("build", function (callback) {
  runSequence("git", "clear", "remote", callback);
});

gulp.task("watch", function () {
  gulp.watch(["**/*.css", "**/*.js", "**/*.html", "**/*.php"], ["build"]);
});

webpack 相关问题

1. webpack 与 grunt、gulp 的不同？

三者都是前端构建工具,grunt 和 gulp 在早期比较流行,现在 webpack 相对来说比较主流,不过一些轻量化的任务还是会用 gulp 来处理,比如单独打包 CSS 文件等。

grunt 和 gulp 是基于任务和流(Task、Stream)的。类似 jQuery,找到一个(或一类)文件,对其做一系列链式操作,更新流上的数据, 整条链式操作构成了一个任务,多个任务就构成了整个 web 的构建流程。

webpack 是基于入口的。webpack 会自动地递归解析入口所需要加载的所有资源文件,然后用不同的 Loader 来处理不同的文件,用 Plugin 来扩展 webpack 功能。

所以总结一下：

从构建思路来说

gulp 和 grunt 需要开发者将整个前端构建过程拆分成多个Task,并合理控制所有Task的调用关系

webpack 需要开发者找到入口,并需要清楚对于不同的资源应该使用什么 Loader 做何种解析和加工

对于知识背景来说

gulp 更像后端开发者的思路,需要对于整个流程了如指掌 webpack 更倾向于前端开发者的思路

2. 与 webpack 类似的工具还有哪些？谈谈你为什么最终选择(或放弃)使用 webpack？

同样是基于入口的打包工具还有以下几个主流的：

webpack

rollup

parcel

从应用场景上来看：

webpack 适用于大型复杂的前端站点构建

rollup 适用于基础库的打包,如 vue、react

parcel 适用于简单的实验性项目,他可以满足低门槛的快速看到效果

由于 parcel 在打包过程中给出的调试信息十分有限,所以一旦打包出错难以调试,所以不建议复杂的项目使用 parcel

3. 有哪些常见的 Loader？他们是解决什么问题的？

file-loader：把文件输出到一个文件夹中,在代码中通过相对 URL 去引用输出的文件

url-loader：和 file-loader 类似,但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去

source-map-loader：加载额外的 Source Map 文件,以方便断点调试

image-loader：加载并且压缩图片文件

babel-loader：把 ES6 转换成 ES5

css-loader：加载 CSS,支持模块化、压缩、文件导入等特性

style-loader：把 CSS 代码注入到 JavaScript 中,通过 DOM 操作去加载 CSS。

eslint-loader：通过 ESLint 检查 JavaScript 代码

4. 有哪些常见的 Plugin？他们是解决什么问题的？

define-plugin：定义环境变量

commons-chunk-plugin：提取公共代码

uglifyjs-webpack-plugin：通过 UglifyES 压缩 ES6 代码

5. Loader 和 Plugin 的不同？

不同的作用

Loader 直译为”加载器”。Webpack 将一切文件视为模块,但是 webpack 原生是只能解析 js 文件,如果想将其他文件也打包的话,就会用到 loader。 所以 Loader 的作用是让 webpack 拥有了加载和解析非 JavaScript 文件的能力。

Plugin 直译为”插件”。Plugin 可以扩展 webpack 的功能,让 webpack 具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果。

不同的用法

Loader 在 module.rules 中配置,也就是它作为模块的解析规则而存在。 类型为数组,每一项都是一个 Object,里面描述了对于什么类型的文件(test),使用什么加载(loader)和使用的参数(options)

Plugin 在 plugins 中单独配置。 类型为数组,每一项是一个 plugin 的实例,参数都通过构造函数传入。

6. webpack 的构建流程是什么?从读取配置到输出文件这个过程尽量说全

Webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程：

初始化参数：从配置文件和 Shell 语句中读取与合并参数,得出最终的参数;

开始编译：用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译;

确定入口：根据配置中的 entry 找出所有的入口文件;

编译模块：从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理;

完成模块编译：在经过第 4 步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系;

输出资源：根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会;

输出完成：在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。

在以上过程中,Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

7. 是否写过 Loader 和 Plugin？描述一下编写 loader 或 plugin 的思路？

Loader 像一个”翻译官”把读到的源文件内容转义成新的文件内容,并且每个 Loader 通过链式操作,将源文件一步步翻译成想要的样子。

编写 Loader 时要遵循单一原则,每个 Loader 只做一种”转义”工作。 每个 Loader 的拿到的是源文件内容(source),可以通过返回值的方式将处理后的内容输出,也可以调用 this.callback()方法,将内容返回给 webpack。 还可以通过 this.async()生成一个 callback 函数,再用这个 callback 将处理后的内容输出出去。 此外 webpack 还为开发者准备了开发 loader 的工具函数集——loader-utils。

相对于 Loader 而言,Plugin 的编写就灵活了许多。 webpack 在运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果。

8. webpack 的热更新是如何做到的？说明其原理？

webpack 的热更新又称热替换(Hot Module Replacement),缩写为 HMR。 这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。

原理：

首先要知道 server 端和 client 端都做了处理工作

第一步,在 webpack 的 watch 模式下,文件系统中某一个文件发生修改,webpack 监听到文件变化,根据配置文件对模块重新编译打包,并将打包后的代码通过简单的 JavaScript 对象保存在内存中。

第二步是 webpack-dev-server 和 webpack 之间的接口交互,而在这一步,主要是 dev-server 的中间件 webpack-dev-middleware 和 webpack 之间的交互,webpack-dev-middleware 调用 webpack 暴露的 API 对代码变化进行监控,并且告诉 webpack,将代码打包到内存中。

第三步是 webpack-dev-server 对文件变化的一个监控,这一步不同于第一步,并不是监控代码变化重新打包。当我们在配置文件中配置了 devServer.watchContentBase 为 true 的时候,Server 会监听这些配置文件夹中静态文件的变化,变化后会通知浏览器端对应用进行 live reload。注意,这儿是浏览器刷新,和 HMR 是两个概念。

第四步也是 webpack-dev-server 代码的工作,该步骤主要是通过 sockjs(webpack-dev-server 的依赖)在浏览器端和服务端之间建立一个 websocket 长连接,将 webpack 编译打包的各个阶段的状态信息告知浏览器端,同时也包括第三步中 Server 监听静态文件变化的信息。浏览器端根据这些 socket 消息进行不同的操作。当然服务端传递的最主要信息还是新模块的 hash 值,后面的步骤根据这一 hash 值来进行模块热替换。

webpack-dev-server/client 端并不能够请求更新的代码,也不会执行热更模块操作,而把这些工作又交回给了 webpack,webpack/hot/dev-server 的工作就是根据 webpack-dev-server/client 传给它的信息以及 dev-server 的配置决定是刷新浏览器呢还是进行模块热更新。当然如果仅仅是刷新浏览器,也就没有后面那些步骤了。

HotModuleReplacement.runtime 是客户端 HMR 的中枢,它接收到上一步传递给他的新模块的 hash 值,它通过 JsonpMainTemplate.runtime 向 server 端发送 Ajax 请求,服务端返回一个 json,该 json 包含了所有要更新的模块的 hash 值,获取到更新列表后,该模块再次通过 jsonp 请求,获取到最新的模块代码。这就是上图中 7、8、9 步骤。

而第 10 步是决定 HMR 成功与否的关键步骤,在该步骤中,HotModulePlugin 将会对新旧模块进行对比,决定是否更新模块,在决定更新模块后,检查模块之间的依赖关系,更新模块的同时更新模块间的依赖引用。

最后一步,当 HMR 失败后,回退到 live reload 操作,也就是进行浏览器刷新来获取最新打包代码。

9. 如何利用 webpack 来优化前端性能？(提高性能和体验)

用 webpack 优化前端性能是指优化 webpack 的输出结果,让打包的最终结果在浏览器运行快速高效。

压缩代码。删除多余的代码、注释、简化代码的写法等等方式。可以利用 webpack 的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩 JS 文件, 利用 cssnano(css-loader?minimize)来压缩 css

利用 CDN 加速。在构建过程中,将引用的静态资源路径修改为 CDN 上对应的路径。可以利用 webpack 对于 output 参数和各 loader 的 publicPath 参数来修改资源路径

删除死代码(Tree Shaking)。将代码中永远不会走到的片段删除掉。可以通过在启动 webpack 时追加参数–optimize-minimize 来实现

提取公共代码。

10. 如何提高 webpack 的构建速度？

多入口情况下,使用 CommonsChunkPlugin 来提取公共代码

通过 externals 配置来提取常用库

利用 DllPlugin 和 DllReferencePlugin 预编译资源模块 通过 DllPlugin 来对那些我们引用但是绝对不会修改的 npm 包来进行预编译,再通过 DllReferencePlugin 将预编译的模块加载进来。

使用 Happypack 实现多线程加速编译

使用 webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速度。 原理上 webpack-uglify-parallel 采用了多核并行压缩来提升压缩速度

使用 Tree-shaking 和 Scope Hoisting 来剔除多余代码

11. 怎么配置单页应用？怎么配置多页应用?

单页应用可以理解为 webpack 的标准模式,直接在 entry 中指定单页应用的入口即可,这里不再赘述

多页应用的话,可以使用 webpack 的 AutoWebPlugin 来完成简单自动化的构建,但是前提是项目的目录结构必须遵守他预设的规范。 多页应用中要注意的是：

每个页面都有公共的代码,可以将这些代码抽离出来,避免重复的加载。比如,每个页面都引用了同一套 css 样式表

随着业务的不断扩展,页面可能会不断的追加,所以一定要让入口的配置足够灵活,避免每次添加新页面还需要修改构建配置

12. npm 打包时需要注意哪些？如何利用 webpack 来更好的构建？

Npm 是目前最大的 JavaScript 模块仓库,里面有来自全世界开发者上传的可复用模块。你可能只是 JS 模块的使用者,但是有些情况你也会去选择上传自己开发的模块。 关于 NPM 模块上传的方法可以去官网上进行学习,这里只讲解如何利用 webpack 来构建。

NPM 模块需要注意以下问题：

要支持 CommonJS 模块化规范,所以要求打包后的最后结果也遵守该规则。

Npm 模块使用者的环境是不确定的,很有可能并不支持 ES6,所以打包的最后结果应该是采用 ES5 编写的。并且如果 ES5 是经过转换的,请最好连同 SourceMap 一同上传。

Npm 包大小应该是尽量小(有些仓库会限制包大小)

发布的模块不能将依赖的模块也一同打包,应该让用户选择性的去自行安装。这样可以避免模块应用者再次打包时出现底层模块被重复打包的情况。

UI 组件类的模块应该将依赖的其它资源文件,例如.css 文件也需要包含在发布的模块里。

基于以上需要注意的问题,我们可以对于 webpack 配置做以下扩展和优化：

CommonJS 模块化规范的解决方案：

设置output.libraryTarget='commonjs2'使输出的代码符合 CommonJS2 模块化规范,以供给其它模块导入使用

输出 ES5 代码的解决方案：

使用 babel-loader 把 ES6 代码转换成 ES5 的代码。再通过开启devtool: 'source-map'输出 SourceMap 以发布调试。

Npm 包大小尽量小的解决方案：

Babel 在把 ES6 代码转换成 ES5 代码时会注入一些辅助函数,最终导致每个输出的文件中都包含这段辅助函数的代码,造成了代码的冗余。解决方法是修改.babelrc 文件,为其加入 transform-runtime 插件

不能将依赖模块打包到 NPM 模块中的解决方案：

使用 externals 配置项来告诉 webpack 哪些模块不需要打包。

对于依赖的资源文件打包的解决方案：通过 css-loader 和 extract-text-webpack-plugin 来实现,配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        //增加对CSS文件的支持
        test: /\.css/,
        //提取出 Chunk 中的CSS代码到单独的文件中
        use: ExtractTextPlugin.extract({
          use: ["css-loader"],
        }),
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin({
      //输出的CSS文件名称
      filename: "index.css",
    }),
  ],
};

13. 如何在 vue 项目中实现按需加载？

Vue UI 组件库的按需加载:

为了快速开发前端项目,经常会引入现成的 UI 组件库如 ElementUI、iView 等,但是他们的体积和他们所提供的功能一样,是很庞大的。 而通常情况下,我们仅仅需要少量的几个组件就足够了,但是我们却将庞大的组件库打包到我们的源码中,造成了不必要的开销。

不过很多组件库已经提供了现成的解决方案,如 Element 出品的 babel-plugin-component 和 AntDesign 出品的 babel-plugin-import 安装以上插件后,在.babelrc 配置中或 babel-loader 的参数中进行设置,即可实现组件按需加载了。

单页应用的按需加载

现在很多前端项目都是通过单页应用的方式开发的,但是随着业务的不断扩展,会面临一个严峻的问题——首次加载的代码量会越来越多,影响用户的体验。

通过import(*)语句来控制加载时机,webpack 内置了对于import(*)的解析,会将import(*)中引入的模块作为一个新的入口在生成一个 chunk。 当代码执行到import(*)语句时,会去加载 Chunk 对应生成的文件。import()会返回一个Promise 对象,所以为了让浏览器支持,需要事先注入Promise polyfill.

Nginx

nginx 是一个反向代理服务器.客户端向服务端发送请求,可以配置一个 nginx 代理服务器.

反向代理

代理服务器负责接收请求,转发给内部的服务器.从颞部服务器得到响应返回给客户端.

反向代理服务器为服务端工作.对服务端是透明的,对客户端不透明.

nginx 的作用

解决跨域

请求过滤

负载均衡

配置 gzip

静态资源服务器

解决跨域

在 server 中配置一个 server-name,和客户端同域名

在 Location 中拦截向客户端域名发送的请求,并且请求代理回服务器.

请求过滤

在 Location 中过滤相应的状态码或者 url,或者请求类型

负载均衡

通过配置 upstream 指定后端服务器的地址列表

在 server 中拦截请求,并将请求转发到 upstream 的后端服务器列表里.

策略

默认采用轮训的策略,缺点是一台服务器压力过大时,会影响其他服务器.

最小连接数策略,优先分配给连接数最少的服务器

least_connt

最快响应时间策略,优先分配给响应时间最短的服务器

fair

静态资源服务器

在 Location 中配置,匹配比如说图片为结尾的请求,转发到本地路径.设置 root 指定路径.

title: Vue组件

date: 2019-09-09 11:23:52

tags:  # 这里写的分类会自动汇集到 categories 页面上，分类可以多级

• Vue.js # 一级分类
• Vue.js基础 # 二级分类

作用

提高代码复用性

组件使用方法

全局注册

全局注册时,Vue.component需要在new Vue实例之前注册.否则报错.

1
2
3
4
5
6
7
8
9

Vue.component('button-counter',{
    data: function(){
        return {
            count: 0
        }
    },
    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
})

优点：所有的 vue 实例都可以用

缺点：权限太大，容错率降低

局部注册

1
2
3
4
5
6
7
8

var app = new Vue({
  el: "#app",
  components: {
    "my-component": {
      template: "<div>我是组件的内容</div>",
    },
  },
});

注意局部注册的组件在其子组件相互之间是不可用的。

如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：

1
2
3
4
5
6
7
8
9
10

var ComponentA = {
  /* ... */
};

var ComponentB = {
  components: {
    "component-a": ComponentA,
  },
  // ...
};

或者采用 import 方法:

1
2
3
4
5
6
7
8

import ComponentA from "./ComponentA.vue";

export default {
  components: {
    ComponentA,
  },
  // ...
};

组件的复用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

<script>
Vue.component('button-counter',{
    data: function(){
        return {
            count: 0
        }
    },
    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
})
</script>

问题: 点击按钮时,三个按键的数字都会变化吗?为什么?

注意当点击按钮时，每个组件都会各自独立维护它的count。因为你每用一次组件，就会有一个它的新实例被创建。

特殊情况

vue 组件的模板在某些情况下会受到 html 标签的限制，比如 <table> 中只能还 有 <tr> , <td>这些元素，所以直接在 table 中使用组件是无效的，此时可以使用is属性来挂载组件

1
2
3

<table>
  <tbody is="my-component"></tbody>
</table>

组件使用技巧

1. 必须使用小写字母加 ­ 进行命名child,my­component命名组件
2. template 中的内容必须被一个 DOM 元素包括,也可以嵌套
3. 在组件的定义中，除了 template 之外还可以使用其他选项,比如data,computed,methods
4. 一个组件的 data 选项必须是一个函数,否则就会出现点一个其他按钮也跟着变化的情况

组件中 data 什么时候可以用对象

因为组件内 data 会复用。一个组件修改，就都会改

解决办法:

new Vue()，生成一个根实例。该组件不会复用，也就不会共享。

组件通信

通过 prop 父传子通信

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<div id="blog-post-demo">
  <h5>我是父组件</h5>
    <child-post
        msg="我是来自父组件的内容"
        v-for="post in posts"
        v-bind:key="post.id"
        v-bind:title="post.title"
    >
    </child-post>
</div>

<script>
Vue.component('child-post',{
    props: ['title','msg'],
    template: '<h3>{{ title }} + {{msg}}</h3>'
})

new Vue({
    el: "#blog-post-demo",
    data: {
        posts: [
            {id: 1, title: 'aaa' },
            {id: 2, title: 'bbb' },
            {id: 3, title: 'ccc' }
        ]
    }
   }
)

</script>

一个组件默认可以拥有任意数量的prop，任何值都可以传递给任何prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问data中的值一样。

如上所示，你会发现我们可以使用v-bind来动态传递prop。这在你一开始不清楚要渲染的具体内容，比如从一个 API 获取博文列表的时候，是非常有用的。

总结

1. 在组件中使用props来从父亲组件接收参数，注意，在props中定义的属性，都可以在组件中直接使用
2. props 来自父级，而组件中 data return 的数据就是组件自己的数据，两种情况作用域就是 组件本身，可以在 template，computed，methods 中直接使用
3. props 的值有两种，一种是字符串数组，一种是对象，本节先只讲数组
4. 可以使用 v-­bind 动态绑定父组件来的内容

单向数据流

• 解释:  通过props传递数据是单向的了,也就是父组件数据变化时会传递给子组件,但是反过来不行。
• 目的: 是尽可能将父子组件解耦，避免子组件无意中修改了父组件的状态。
• 应用场景: 业务中会经常遇到两种需要改变prop的情况

一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件 data 内再声明一个数据，引用父组件的prop

步骤一：注册组件

步骤二：将父组件的数据传递进来，并在子组件中用 props 接收

步骤三：将传递进来的数据通过初始值保存起来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div id="app">
    <my-comp init-count="666"></my-comp>
</div>
<script>
    var app = new Vue({
        el: '#app',
        components: {
            'my-comp': {
                props: ['init-count'],
                template: '<div>{{init-count}}</div>',
                data: function() {
                    return {
                      //初始值count.props中的值通过this.XXX获取
                        count: this.initCount
                    }
                }
            }
        }
    })
</script>

另一种情况就是prop作为需要被转变的原始值传入。这种情况用计算属性就可以了

步骤一：注册组件

步骤二：将父组件的数据传递进来，并在子组件中用 props 接收

步骤三：将传递进来的数据通过计算属性进行重新计算

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<div>
    <input type="text" v-model="width">
    <my-comp :width="width"></my-comp>
</div>

<script>
var app = new Vue({
    el: "#app",
    data: {
        width: ''
    },
    components: {
        'my-comp': {
            props: ['init-count', 'width'],
            template: '<div :style="style">{{ init-count }}</div>',
            computed: {
                style: function(){
                    return {
                        width: this.width + 'px',
                        background: 'red'
                    }
                }
            }
        }
    }
})
</script>

驼峰命名与短横线命名

1. 在 html 中,myMessage和mymessage是一样的.因此在组件中的 html 中必须使用短横线命名.
2. 在组件中,父组件给子组件传数据必须用短横线(属于 HTML 范围内),因为 html 不识别驼峰,在props中无所谓.在template中必须使用驼峰命名.
3. 在组件中的data中,用this.XXX引用时,必须使用驼峰命名.

数据验证

验证的  type  类型可以是：

• String

• Number

• Boolean

• Object

• Array

• Function

在 props 中设定数据类型时,必须使用对象格式,即

1
2
3
4
5
6
7
8
9
10
11
12

props: {
  //msg必须是数字
  msg: Number,
  //total既可以是数字又可以是字符串
  total: [Number,String]
  //ach是布尔值,默认是true,required是必传项.
  ach: {
    type: Boolean,
    default: true,
    required: true
  }
}

组件通信

组件通信分为父子通信,兄弟通信,跨级通信.

子传父通信

使用v­-on除了监听 DOM 事件外，还可以用于组件之间的自定义事件.

JavaScript 的设计模式 一一观察者模式， dispatchEvent和addEventListener这两个方法.Vue 组件也有与之类似的一套模式，

子组件用$emit()来触发事件,父组件用$on()来监听子组件的事件.

1. 自定义事件change
2. 在子组件中用$emit触发change,即this.$emit('change',this.count).括号里前面是用户名,后面是传递参数.
3. 在自定义事件中用一个参数来接受

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<div id="app">
    <p>您的余额为{{ total }}</p>
    //父组件内用v-on监听change事件
    <btn-component @change="handleTotal"></btn-component>
</div>

<script>
var app = new Vue({
    el: "#app",
    data: {
        total: 0
    },
    methods: {
        handleTotal: function(value){
            this.total = value
        }
    },
    components: {
        'btn-component': {
            template: '<div>\
                <button @click="handleIncrease">+1</button>\
                <button @click="handleReduce">-1</button>\
            </div>',
            data: function(){
                return {
                    count: 0
                }
            },
            methods: {
                handleIncrease: function(){
                    this.count++;
                    this.$emit('change', this.count)
                },
                handleReduce: function(){
                    this.count--
                    this.$emit('change', this.count)
                }
            }
        }
    }

})

</script>

在组件中使用 v-model

$emit的代码实际上会触发一个 input 事件,input后的参数就是传递给v-model绑定的属性的值.

v-model其实是一个语法糖,其实绑定了两层操作:

1. v-bind绑定一个 value 值
2. v-on指令给当前元素绑定 input 事件

1
2
3
4
5
6

<input v-model="total">
//等价于
<input
  v-bind:value="total"
  v-on:input="total = $event.target.value"
>

要使用v-model,要做到:

1. 接收一个 value 属性
2. 在有新的 value 时触发 input 事件

修改上面的实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<div id="app">
    <p>您的余额为{{ total }}</p>
    <btn-component v-model="total"></btn-component>
    //如果又添加一个相同的组件,点击也会变化,只不过显示的值属于各自的结果,不冲突
    <btn-component v-model="total"></btn-component>
</div>
<script>
var app = new Vue({
    el: "#app",
    data: {
        total: 0
    },
    components: {
        'btn-component': {
            template: `<div>
                <button @click="handleincrease">+1</button>
                <button @click="handlereduce">-1</button>
            </div>`,
            data: function(){
                return {
                    count: 0
                }
            },
            methods: {
                handleincrease: function(){
                    this.count++
                    this.$emit('input',this.count)
                },
                handlereduce: function(){
                    this.count--
                    this.$emit('input',this.count)
                }
            }
        }
    }
})
</script>

V-model 简单实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div id="app">
  <h5>我是父组件</h5>
  <input type="text" v-model="parentmsg">
  // 下面的是子组件,通过v-bind绑定msg到父组件中v-model所绑定的parentmsg,通过props传递到模板中渲染到页面
  <child :msg="parentmsg"></child>
</div>

<script>
Vue.component('child',{
    props: ['msg'],
    template: '<h3>{{msg}}</h3>'
})

new Vue({
    el: "#app",
    data: {
        parentmsg:''
    }
   }

)
</script>

非父子组件通信(兄弟通信)

方法: 使用 bus 中介

使用一个空的 Vue 实例作为中央事件总线(bus):

var bus = new Vue()

触发组件 A 中的事件

bus.$emit('id-selected',1)

在组件 B 创建的钩子中监听事件

bus.$on('id-selected',function(id){//....})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<div id="app">
<my-acomponent></my-acomponent>
<my-bcomponent></my-bcomponent>
</div>

<script>
Vue.component('my-acomponent',{
    template: `<div><button @click="handle">点击我向B组件传数据</button></div>`,
    data: function(){
        return {
            aaa: '我来自a组件'
        }
    },
     methods: {
         handle: function(){
             this.$root.bus.$emit('lala', this.aaa)
         }
     }
})

Vue.component('my-bcomponent',{
    template: `<div>我是B组件</div>`,
    created: function(){
        //A组件在实例创建的时候就监听事件--lala事件
        this.$root.bus.$on('lala',function(value){
            alert(value)
        })
    }
})

var app = new Vue({
    el:"#app",
    data: {
        //bus中介
        bus: new Vue()
    }
})
</script>

父链和子链

this.$parent(从父组件里拿内容)

1
2
3
4
5
6
7
8

Vue.component("child-component", {
  template: `<button @click="setFatherData">通过我修改父亲的数据</button>`,
  methods: {
    setFatherData: function () {
      this.$parent.msg = "数据已修改";
    },
  },
});

this$refs(从子组件里拿内容 )

为子组件提供索引的方法,用特殊的属性 ref 为其增加一个索引

如果用$children会把所有子组件都拿到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<div id="app">
    <my-acomponent ref="A"></my-acomponent>
    <my-bcomponent ref="B"></my-bcomponent>
    <button @click="getChildData">我是父组件,我要拿到子组件的数据</button>---{{ msg }}
</div>
<script>
var app = new Vue({
    el: "#app",
    data: {
        bus: new Vue()
        msg: '数据未拿到',
        formchild: '还未拿到'
    },
    methods: {
        getChildData: function(){
            //用来拿子组件中的内容---$refs
            this.fromChild = this.$refs.b.msg
        }
    }

})

Vue.component('my-acomponent',{
    template: `<div></div>`,
    data: function(){
        return {
            msg: '我来自a组件'
        }
    }
})
</script>

使用 slot 插槽分发内容

什么是插槽

为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发.Vue.js  实现了一个内容分发 API，使用特殊的slot元素作为原始内容的插槽.

编译的作用域

父组件的作用域在父组件内,即<div id="app"></div>内部(便于理解).

子组件的作用域在子组件的template里.

插槽的用法

混合父组件的内容和子组件的模板

1. 单个插槽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div id="app">
    <my-component>
        <p>父组件</p>
        //虽然是父组件的作用域,但没有slot插槽,父组件的信息是无法显示
        //插槽的作用是把父组件的内容插入到下面的子组件中,最后会显示出来
    </my-component>
</div>
<script>
Vue.component('my-component',{
    template: `<div>
        <slot>
            如果父组件没有插入内容,那么我就作为默认出现
        </slot>
    </div>`
})
var app = new Vue({
    el:"#app",
    data: {

    }
})
</script>

2. 具名插槽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<div id="app">
    <my-component>
        <h3 slot="header">我是标题</h3>
        //给父组件的插槽命名,可以和子组件模板的slot一一对应
        <p>父组件</p>
        //这个不命名的自然就对应那个没有命名的slot
        <p slot="footer">我是底部信息</p>
    </my-component>
</div>
<script>
Vue.component('my-component',{
    template: `<div>
       <div class="header">
            <slot name="header"></slot>
       </div>
       <div class="container">
            <slot></slot>
       </div>
       <div class="footer">
            <slot name="footer"></slot>
       </div>
    </div>`
})
var app = new Vue({
    el:"#app",
    data: {

    }
})
</script>

3. 作用域插槽

作用域插槽是一种特殊的插槽,使用一个可复用的模板来替换已渲染的元素

• 从子组件获取数据
• <template>标签是不会渲染出来的,Vue 版本更新后,也可以写在其他标签上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div id="app">
    <my-component>
        <template slot="abc" slot-scope="prop">
        //写一个临时变量prop,用临时变量拿子组件的信息
            {{ prop.text }}
        </template>
    </my-component>
</div>
<script>
Vue.component('my-component',{
    template: `<div>
        <slot name="abc" text="我是子组件的内容">
        </slot>
    </div>`
})
var app = new Vue({
    el:"#app",
    data: {

    }
})
</script>

访问slot

通过this.$slots.(name)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<div id="app">
    <my-component>
        <h3 slot="header">我是标题</h3>
        <p>父组件</p>
        <p slot="footer">我是底部信息</p>
    </my-component>
</div>
<script>
Vue.component('my-component',{
    template: `<div>
       <div class="header">
            <slot name="header"></slot>
       </div>
       <div class="container">
            <slot></slot>
       </div>
       <div class="footer">
            <slot name="footer"></slot>
       </div>
    </div>`,
    mounted: function(){
        //访问插槽
        var header = this.$slots.header
        var text = header[0].elm.innerText
        console.log(header)
        //打印一个虚拟节点
        console.log(text)
    }
})
var app = new Vue({
    el:"#app",
    data: {

    }
})
</script>

组件高级用法-动态组件

实现需求: 点击不同按钮切换不同页面

使用is动态绑定组件,调用方法切换不同页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<div id="app">
    <component :is="thisView"></component>
    <button @click="handleView('A')">第一句</button>
    <button @click="handleView('B')">第二句</button>
    <button @click="handleView('C')">第三句</button>
    <button @click="handleView('D')">第四句</button>
</div>
<script>
Vue.component('comA',{
  template:`<div>鹅鹅鹅</div>`
})
Vue.component('comB',{
  template:`<div>曲项向天歌</div>`
})
Vue.component('comC',{
  template:`<div>白毛浮绿水</div>`
})
Vue.component('comD',{
  template:`<div>红掌拨清波</div>`
})

var app = new Vue({
    el: "#app",
    data: {
        thisView: 'comA'
    },
    methods: {
        handleView: function(tag){
            this.thisView = 'com' + tag
        }
    }
})
</script>

解析 DOM 模板时的注意事项

有些 HTML 元素，诸如<ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。

1
2
3

<table>
  <blog-post-row></blog-post-row>
</table>

这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的is特性给了我们一个变通的办法：

1
2
3

<table>
  <tr is="blog-post-row"></tr>
</table>

需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：

1. 字符串 (例如：template: ‘…’)
2. 单文件组件 (.vue)
3. <script type="text/x-template">

模块系统

在模块系统中局部注册

推荐创建一个 components 目录，并将每个组件放置在其各自的文件中。

然后你需要在局部注册之前导入每个你想使用的组件。例如，在一个假设的 ComponentB.js 或 ComponentB.vue 文件中：

1
2
3
4
5
6
7
8
9
10

import ComponentA from "./ComponentA";
import ComponentC from "./ComponentC";

export default {
  components: {
    ComponentA,
    ComponentC,
  },
  // ...
};

现在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了

基础组件的自动化全局注册

可能你的许多组件只是包裹了一个输入框或按钮之类的元素，是相对通用的。我们有时候会把它们称为基础组件，它们会在各个组件中被频繁的用到。

所以会导致很多组件里都会有一个包含基础组件的长列表：

1
2
3
4
5
6
7
8
9
10
11

import BaseButton from "./BaseButton.vue";
import BaseIcon from "./BaseIcon.vue";
import BaseInput from "./BaseInput.vue";

export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput,
  },
};

如果你使用了 webpack (或在内部使用了 webpack 的 Vue CLI 3+)，那么就可以使用 require.context 只全局注册这些非常通用的基础组件。这里有一份可以让你在应用入口文件 (比如 src/main.js) 中全局导入基础组件的示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

import Vue from "vue";
import upperFirst from "lodash/upperFirst";
import camelCase from "lodash/camelCase";

const requireComponent = require.context(
  // 其组件目录的相对路径
  "./components",
  // 是否查询其子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /Base[A-Z]\w+\.(vue|js)$/
);

requireComponent.keys().forEach((fileName) => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName);

  // 获取组件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 获取和目录深度无关的文件名
      fileName
        .split("/")
        .pop()
        .replace(/\.\w+$/, "")
    )
  );

  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  );
});

记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生.

Prop

Prop 的大小写

HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符.

当使用 dom 中的模板时,驼峰命名的 prop 需要使用其等价的短横线命名替换:

1
2
3
4
5
6
7
8
9
10

//js
Vue.component('blog-post', {
  // 在 JavaScript 中是 驼峰 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

//html
<!-- 在 HTML 中是短横线的 -->
<blog-post post-title="hello!"></blog-post>

prop 的类型

字符串和对象

字符串:props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

对象:

1
2
3
4
5
6
7
8
9

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

传递静态或动态 Prop

传静态值:

1

<blog-post title="My journey with Vue"></blog-post>

动态赋值:

1

<blog-post v-bind:title="post.title"></blog-post>

布尔值:

1
2
3
4
5
6
7
8
9