axuebin
axuebin
## 什么是 file-loader 简单来说，`file-loader` 就是在 `JavaScript` 代码里 `import/require` 一个文件时，会将该文件生成到输出目录，并且在 `JavaScript` 代码里返回该文件的地址。 ## 如何使用 ### 1. 安装 `file-loader` ``` npm install file-loader --save-dev ``` ### 2. 配置 `webapck` ```javascript // webpack.config.js...
# 这篇 iTerm2 + Oh My Zsh 教程手把手让你成为这条街最靓的仔 ## 前言 作为一名程序员，开发环境不舒服会很大程度影响开发效率，所以一定要花时间**好好整一下开发环境**（好了，我知道你是在给摸鱼找借口）。  最近短短几个月，换了两次新电脑，经历了两次装机（由于各种原因，没法备份恢复，你懂的），每一次都得重新搞一套属于自己的开发环境。这里就记录一下我是如何一步一步的打造属于自己的`Terminal`，你如果想和我一样，直接`cv 大法`就可以搞一套一样的。 ## Terminal `Terminal`我们经常会称作`终端`，现在中文版的`mac`里也是叫做这个。  我们每天都需要在其中输入很多命令去做一些事情。可以说，每天有大量的时间都需要面对它。我记得我第一次点下鼠标，打开这个终端的时候，看到了这样一个界面：  我傻了。怎么这么丑？`macOS`上怎么允许有这么丑的应用？  不行，如果让我每天对着它，一定会把电脑砸了（虽然它是高贵的 16 寸 MacBook Pro），我得找一个第三方`Terminal`来替代它。 ## iTerm2 很快，我就找到了新欢，它的名字叫`iTerm2`，它是一款完全免费，为`macOS`打造的一款终端工具，可以说是程序员必备了，如果还没用过的，赶紧跟着这篇文章用起来吧。[👉iTerm2...
## 前言 两年前，我和你一样，也是一名即将参加校招的同学。 我写这篇文章不是因为我的校招成绩很辉煌，也不是因为我收割了多少 offer，而是回过头来看校招，多少有些感想，可以分享给大家。 希望看完文章，你和我不一样，成为 offer 收割机。 从现在开始，各大互联网公司的校招应该逐步都会开启了... 大家要迅速行动起来了，先面试先拿 offer 这个道理大家都懂吧。 ## 前期工作 首先，最重要的一点，我们得**了解**校招，而不是简简单单地写一份简历就海投，这样无疑效率是非常低的。 建议大家这段时间可以提前做一些准备工作： - 公司列表 - 时间节点 - 提前批/内推/网申有什么区别 - 查看 FAQ - 寻找靠谱的内推人 - ... ###...
## 前言 平时在使用 `antd`、`element` 等组件库的时候，都会使用到一个 `Babel` 插件：`babel-plugin-import`，这篇文章通过例子和分析源码简单说一下这个插件做了一些什么事情，并且实现一个最小可用版本。 插件地址：[https://github.com/ant-design/babel-plugin-import](https://github.com/ant-design/babel-plugin-import) ## babel-plugin-import 介绍 ### Why：为什么需要这个插件 `antd` 和 `element` 这两个组件库，看它的源码， `index.js` 分别是这样的： ```jsx // antd export { default as Button } from './button';...
整理`call`、`apply`、`bind`这三个方法的的知识点。 ---- 之前[这篇文章](http://axuebin.com/blog/2017/09/19/javascript-this/)提到过`this`的各种情况，其中有一种情况就是通过`call`、`apply`、`bind`来将`this`绑定到指定的对象上。 也就是说，这三个方法可以改变函数体内部`this`的指向。 这三个方法有什么区别呢？分别适合应用在哪些场景中呢？ 先举个简单的栗子 ~ ```javascript var person = { name: "axuebin", age: 25 }; function say(job){ console.log(this.name+":"+this.age+" "+job); } say.call(person,"FE"); // axuebin:25 FE say.apply(person,["FE"]); // axuebin:25 FE...
> 未经授权，不得转载。如需转载，请联系作者。 ## 写在前面 Rax 是淘系的一套跨端解决方案。 根据 [Rax 工程配置](https://www.yuque.com/hedgqh/de046s/yv19ez) 知道，使用 `Rax` 时，如果设置了 `target: ['web', 'weex']`，则构建产物 `build` 目录会有两个子目录：`web` 和 `weex`，分别在 `web` 端和 `weex` 端消费。并且通过观察可以发现，两个目录下的内容是不一样的，已经根据不同环境拆分代码。业务逻辑比较复杂时，代码体积会比较大，按端拆分代码的能力是必须的。 但是在 `src` 目录中并没有区分 `web` 和 `weex` 目录，代码是写到一起的，通过...
> 未经授权，不得转载。 ## 写在前面 我在尤大的 `GitHub` 上发现了一个有趣的东西 [vue-lit](https://github.com/yyx990803/vue-lit "vue-lit")，直觉告诉我这又是一个啥面向未来的下一代 xxx，所以我就点进去看了一眼是啥新玩具。 ## Hello World > Proof of concept mini custom elements framework powered by @vue/reactivity and lit-html. 看上去是尤大的一个验证性的尝试，看到 `custom element` 和...
## 前言 最近在尝试玩一玩已经被大家玩腻的 `Babel`，今天给大家分享**如何用 `Babel` 为代码自动引入依赖**，通过一个简单的例子入门 `Babel` 插件开发。 ## 需求 ```js const a = require('a'); import b from 'b'; console.log(axuebin.say('hello babel')); ``` 同学们都知道，如果运行上面的代码，一定是会报错的： ```shell VM105:2 Uncaught ReferenceError: axuebin is not...
## 0. 前言 本文将 `webpack` 的 `Loader` 相关的知识点整理了一下，部分文字是从官方文档中直接摘录过来的，并附上自己的理解。如果觉得看起来和官方文档差不多，直接看官方文档最好啦~ - [webpack Loaders](https://webpack.js.org/loaders/) - [Loader api](https://webpack.js.org/api/loaders/) - [Writing a Loader](https://webpack.js.org/contribute/writing-a-loader/) ## 1. 简述 webpack 工作流程 本文不过多描述 `webpack` 的作用和使用方法，如果还不是太熟悉，可以打开 [https://webpack.js.org/](https://webpack.js.org/) 先熟悉一下。 关于 `webpack`...
## 什么是 `style-loader` `style-loader` 的功能就一个，在 `DOM` 里插入一个 `` 标签，并且将 `CSS` 写入这个标签内。 简单来说就是这样： ```javascript const style = document.createElement('style'); // 新建一个 style 标签 style.type = 'text/css'; style.appendChild(document.createTextNode(content)) // CSS 写入 style 标签...