二:编译ES6

今天介绍webpack怎么编译ES6的各种函数和语法。敲黑板:这是webpack4版本哦, 有一些不同于webpack3的地方。

>>> 本节课源码

>>> 所有课程源码

一:打包JS

webpack 本身就是为了打包js所设计,作为第一节,介绍怎么打包js

零:前言

1. 什么是webpack?

前端目前最主流的javascript打包工具,在它的帮助下,开发者可以轻松地实现加密代码、多平台兼容。而最重要的是,它为前端工程化提供了最好支持。vuereact等大型项目的脚手架都是利用 webpack 搭建。

所以,学习webpack可以帮助开发者更好的进行基于javascript语言的开发工作。

2. 怎么学习webpack?

如果一个新手不幸打开vue-cli中关于webpack的配置,乱起八糟的配置就像看天书一样(我就是这样)。

所以,学习的时候还是要从基础学起,首先应该学习常用的概念、插件的用法,最后,才能根据需要进行组合。

因此,这个系列教程先从JS、编译ES6等方面讲起,逐步延伸到CSSSCSS等,再到多页面、懒加载等技术,力求将知识点解构,而不是混淆在一起

3. 关于本课程

3.1 webpack版本

本课程不同于网上的v3版本,采用最新的webpack4。并且会记录v3 -> v4升级过程中的一些问题。

3.2 课程源码

如果你的自学能力很强,欢迎直接来看源码。仓库地址https://github.com/dongyuanxin/webpack-demos

如果对您的学习、工作或者项目有帮助,欢迎帮忙 Star,更欢迎一起维护。

3.3 课程地址

  1. Github 仓库地址
  2. 我的个人网站(最新 && 最快)
  3. 博客园
  4. 简书

3.4 课程源码目录 (截至 2018/7/27)

按照知识点,目录分成了 16 个文件夹(之后还会持续更新)。代码和配置都在对应的文件夹下。

  1. demo01: 打包JS
  2. demo02: 编译ES6
  3. demo03: 多页面解决方案–提取公共代码
  4. demo04: 单页面解决方案–代码分割和懒加载
  5. demo05: 处理CSS
  6. demo06: 处理Scss
  7. demo07: 提取Scss (CSS等等)
  8. demo08: JS Tree Shaking
  9. demo09: CSS Tree Shaking
  10. demo10: 图片处理–识别, 压缩, Base64编码, 合成雪碧图
  11. demo11: 字体文件处理
  12. demo12: 处理第三方JS
  13. demo13: 生成Html文件
  14. demo14: Watch Mode && Clean Plugin
  15. demo15: 开发模式–webpack-dev-server
  16. demo16: 生产模式和开发模式分离

4. 致谢

此教程是在我学习 mooc 网 四大维度解锁 Webpack3.0 工具全技能 整理的代码和v4.0版本的升级教训。欢迎大家去学习。

批量修改log中的提交信息

事情的起因是这样的:迷恋的谷歌的我最近申请了一个新的 google 邮箱。然后果断在 github 上更新了邮箱地址,并且删除了之前的 163 等国内邮箱。

回到 github 首页,我发现之前的项目提交记录都没了。到底什么情况(O_o)??

看一张灾难现场图:

仔细查找了相关资料,发现了是因为之前的提交记录中Author字段的信息是 163 等国内邮箱的。如下:

所以,解决方法就是:更改log中的提交信息

CSS3盒模型:border-box

box-sizing可以声明计算元素高宽的 CSS 盒模型。它有content-boxborder-boxinherit三种取值。其中border-box是 css3 新增,也是主流 UI 框架的全局默认属性。

scss:最常见的css预处理器

SassSCSS 其实是同一种东西,我们平时都称之为 Sass

他们都是用Ruby开发 Css 预处理器,boostrap4已经将less换成了scss

scss实现样式复用: 继承、占位符、混合宏

如何让 scss 代码可复用?三种复用方式分别用在何处?下方是一段自定义大小的样例 👇

$height: 15px !default;
$width: 18px !default;

@mixin size($list...) {
    @if length($list) == 0 {
        height: $height;
        width: $width;
    } @else if length($list) == 1 {
        height: $list;
        width: $list;
    } @else if length($list) == 2 {
        height: nth($list, 1);
        width: nth($list, 2);
    } @else {
        @debug "Too many parameters";
    }
}

谈谈promise/async/await的执行顺序与V8引擎的BUG

故事还是要从下面这道面试题说起:请问下面这段代码的输出是什么?

console.log("script start");

async function async1() {
    await async2();
    console.log("async1 end");
}

async function async2() {
    console.log("async2 end");
}
async1();

setTimeout(function() {
    console.log("setTimeout");
}, 0);

new Promise(resolve => {
    console.log("Promise");
    resolve();
})
    .then(function() {
        console.log("promise1");
    })
    .then(function() {
        console.log("promise2");
    });

console.log("script end");

Promise 概述

本文介绍了 Promise 的常用 API。

前端系列汇总

作者:心谭,Web Developer

本仓库是作者在学习 Web 开发过程中积累的笔记,主要以前端开发和算法题解为主,自 2018 年开始一直持续更新。如果这些笔记对你的学习有帮助,欢迎通过以下方式支持一下,你的支持是我持续维护的动力:

文章目录地址:xin-tan.com

文章阅读地址: 前端图谱 / 算法题解

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×