articles
articles copied to clipboard
axuebin
:memo: 文章归档
## 前言 平时在使用 `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 标签...
## 什么是 url-loader `url-loader` 会将引入的文件进行编码，生成 `DataURL`，相当于把文件翻译成了一串字符串，再把这个字符串打包到 `JavaScript`。 ## 什么时候使用 一般来说，我们会发请求来获取图片或者字体文件。如果图片文件较多时（比如一些 `icon`），会频繁发送请求来回请求多次，这是没有必要的。此时，我们可以考虑将这些较小的图片放在本地，然后使用 `url-loader` 将这些图片通过 `base64` 的方式引入代码中。这样就节省了请求次数，从而提高页面性能。 ## 如何使用 ### 1. 安装 `url-loader` ``` npm install url-loader --save-dev ``` ### 2. 配置...
## 1 什么是 `vue-loader` > `vue-loader` 是一个 `webpack` 的 `loader`，它允许你以一种名为单文件组件的格式撰写 `Vue` 组件。 ## 2 如何使用 `vue-loader` ### 2.1 安装 `vue-loader` ``` npm install vue-loader vue-template-compiler --save-dev ``` ### 2.2 配置...
# TypeScript Start 最近开始用 `TypeScript` 来写项目，写起来还是挺顺畅的。其实学习 `TypeScript`，看它的官方文档就够了，剩下就是 `coding` 了。我这里主要是我在 `TypeScript` 学习过程中记录的一些东西~ ## 什么是 TypeScript ~~`TypeScript` 也被称作 `AnyScript`，因为你在 `coding` 的时候需要为每个变量设一个 `any` 的类型。~~ 咳咳，开玩笑开玩笑，可别真的让每个变量都是 `any`，会被疯狂吐槽的。 [TypeScript](https://github.com/Microsoft/TypeScript) 是微软开发一款开源的编程语言，它是 `JavaScript` 的一个超集，本质上是为 `JavaScript` 增加了静态类型声明。任何的 `JavaScript`...