编译和转译的区别，前端为什么需要转译器，都有哪些转译器。之后介绍了babel、typescript、terser、prettier、postcss、swc 等转译器。一文全面了解前端转译器。

距离我上一篇文章已经过去了两个月了，这两个月因为一直在忙实习面试的事情，所以文章产出这边就稍微耽搁了一下（其实就是懒），最后也成功拿到了某大厂的 offer，现在已经入职实习了，也算是 2021 年的第一个喜讯吧（笑）。好了，不多说，接上篇 实现一个符合 Promise/A+规…

组1：单色图标用 iconfont 上提供的字体文件，彩色图标用 img 引入代替或者使用iconfont 上提供的 symbol.js 。 组2：引入 svg 文件，通过 react-svg-loader 将其包裹成一个 react 组件使用。 组3：引入 svg 文件，通过…

三. tree-shaking实践 webpack2 发布，宣布支持tree-shaking，webpack 3发布，支持作用域提升，生成的bundle文件更小。 再没有升级webpack之前，增幻想我们的性能又要大幅提升了，对升级充满了期待。实际上事实是这样的 升级完之后，b…

App往往有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过Tree shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。 关于Tree shaking的原理，在Tree S…

现在网上有很多react原理解析这样的文章，但是往往这样的文章我看完过后却没有什么收获，因为行文思路太快，大部分就是写了几句话简单介绍下这段代码是用来干嘛的，然后就贴上源码让你自己看，有可能作者本人是真的看懂了，但是对于大部分阅读这篇文章的人来说，确是云里雾里。 讲解一个框架的…

最后再延伸讲下 Babel 的编译和 webpack 的打包原理。 在了解 AMD 规范之前，我们先来看看 require.js 的使用方式。 data-main="vender/main" 表示主模块是 vender 下的 main.js。 require 的第一个参数表示依…

babel已经推出7.x版本，与babel紧密关联的core-js也推出了3.x版本，与babel7.x和core-js3.x对应的是babel6.x和core-js2.x。babel7.x和core-js3.x有很多新变化，值得学习，并且目前业务中的很多还使用的是babel6…

我们可以在 Babel 官网的 Try it out，查看 Babel 编译后的代码。 我们可以看到 Babel 构建了一个 _applyDecoratedDescriptor 函数，用于给方法装饰。 顺便注意这是一个 ES5 的方法。 此时传入 _applyDecorated…