无论是JavaScript或其他编程语言，都会存在“作用域”的概念。它规定了代码对变量的访问权限以及如何查找变量。词法作用域分为静态作用域和动态作用域，JavaScript所采用的是静态词法作用域。

在使用 webpack 构建项目时，经常会使用到 resolve.alias 的功能。它可以用来创建 import 或 require 的别名，使得模块引入变得更简单。

1
2
3

alias: {
    '@': 'src/components'
}

现在，可以替换替换原有的导入路径方式：

1
2
3
4

// before
import component from "src/components/component"
// after
import component from "@/component"

在CSS预处理器的@import中使用alias

@import存在于 css 中，而 css 是由 css-loader 来进行处理的，所以在处理过程中并不能使用 webpack loader 的 alias 配置。下面的引入将不会生效：

1

@import "@/reset.css"

使用 ~ 标识符

想要在 css 中使用 alias，可以采用如下解决方案：

1

@import "~@/reset.css"

~的作用是告诉 webpack，当前 import 的路径是使用 alias 配置进行导入。
可以点击这里查看该css-loader Issues详情

1、准备好 Vue 插件

在发布 npm 之前，你需要按照Vue插件开发手册开发完成你的 Vue 插件。

CSS Grid Layout 是 CSS 中非常强大的布局系统，与 flexbox 很相似。但 flexbox 主要针对一维布局， grid layout 能够很好的作用于二维布局。
本文将使用 grid layout 的若干属性来创建一个自适应布局，体会一下在屏幕适配方面 grid layout 给我们带来的便携。
如果你还没有学习或接触过 gird layout ，可以先通过这篇文章来学习一下。

1、变量提升（hoisting）

1
2

console.log(a)    // undefined
var a = 1

上述代码会输出 undefined。
是由于var声明的变量会将声明提升到作用域的顶部（实际上let和const都会存在变量提升），也就等价于：

1
2
3

var a
console.log(a)
a = 1

这就是所谓的变量提升。不仅仅变量会被提升，函数也会被提升：

1
2
3

console.log(a)   // function a() {}
var a = 1
function a() {}

且函数提升的优先级始终要大于变量。