当新建项目的时候，我们通常需要设计目录结构、配各种配置、处理打包编译，而且每次新建都要重来一遍，或把原来的项目 copy 一份再改改。那能不能自己写个模板，然后还可以支持个性化自动创建呢？今天我就来和大家一起分享如何定制一套自己的项目脚手架，提升开发效率。 这里需要引入脚手架的…

需要读到入口文件里面的内容。 分析入口文件，递归的去读取模块所依赖的文件内容，生成AST语法树。 我们创建了add.js文件和minus.js文件,然后 在index.js中引入，再将index.js文件引入index.html。 现在我们打开index.html。你猜会发生什…

1. 背景 最近和部门老大，一起在研究团队【EFT - 前端新手村】的建设，目的在于：帮助新人快速了解和融入公司团队，帮助零基础新人学习和入门前端开发并且达到公司业务开发水平。 2. 文章概要 我将从最基础的【项目初始化】开始介绍，到【处理 CSS / JS / 图片】，到【热…

没有什么比时间更具有说服力了，因为时间无需通知我们就可以改变一切。 Webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使…

我在2年之前，写过一篇中小型项目的前端架构浅谈。随着能力的上升，以及在阿里巴巴工作的经验，是时候写一篇大型项目的前端架构分析了。 本篇文章不会更多侧重于具体技术实现，而是尝试从更高角度出发，分析为什么要这么做，这些设计能解决什么问题，成本和收益如何。 由于作者能力有限，可能会有…

在16年年底的时候，同事聊起脚手架。由于公司业务的多样性,前端的灵活性,让我们不得不思考更通用的脚手架。而不是伴随着前端技术的发展，不断的把时间花在配置上。于是chef-cli诞生了。 18年年初，把过往一年的东西整理和总结下，重新增强了原有的脚手架project-next-c…

前端的打包工具从之前的browserify、grunt、gulp到现如今的rollup、webpack，涌现出了很多优秀的打包工具，而目前最火的无疑是webpack，无论是当前热门的框架还是工具库很多都选择了它作为打包工具，因此在开发中webpack作为打包工具是一个很好的选择…

0. 背景 随着构建体系不断完善、构建体验不断优化，webpack 已经逐渐成为了前端构建体系的一大霸主，对于工作中的真正意义上的前端工程项目，webpack 已经成为了我们前端构建技术选型的不二选择，包括 create-react-app 以及 vue-cli 等等业内常见的…

随着前端代码需要处理的业务越来越繁重，我们不得不面临的一个问题是前端的代码体积也变得越来越庞大。这造成无论是在调式还是在上线时都需要花长时间等待编译完成，并且用户也不得不花额外的时间和带宽下载更大体积的脚本文件。 然而仔细想想这完全是可以避免的：在开发时难道一行代码的修改也要重…