babel

笔者就读于杭州师范大学（世界上最好的大学），感谢在这里的三年，遇到的同学和导师！ 笔者在大二开始自学 Web 开发，大二上学期做的 Java 后端，大二下学期转前端，和导师做了两个商业项目。 从今年二月初准备简历，开始复习整理知识点，投递了 字节 、 腾讯 、 阿里 、 百度 ，经历大大小小的面试，最终到 4 月 17 日 接到阿里盒马意向书已经两个半月了，期间也经历过 burnout 的阶段，不过结果还是好的，现在希望通过这一篇文章，将大学里最重要的这两个月总结一下，也给大家做一些原创的、有用的、不一样的分享。 截止至发稿，目前 字节抖音挂 腾讯 PCG 口头 offer，后来接了阿里就没接腾讯 阿里盒马已上岸 百度等 HR 中… 面经 我会按照首次（一面）开始的顺序来写，腾讯 PCG，字节抖音，阿里投递的 BU 比较多，最后是百度统招（部门未知）。 为什么是这个顺序？因为我的春招，准备和投简历是同时开始的，也就是说我刚开始是比较薄弱的，知识点没复习，面试经验不够，这些都是一边面试一边总结出来的。 蚂蚁金服两轮（直通终面） 一面（电话 1h10min） 二月中旬面试，当时还是个小菜鸟，面试官很 nice，一直鼓励我，说我的项目经历丰富，愿意多挖掘我一点。我当时怕是对“挖掘”二字有什么误解，竟然还开开心心说了个“好哒”。后面对于当时还是菜鸟的我简直就是炼狱难度。 自我介绍 输入

webpack打包各种javascript文件 (本文只是提供一个学习记录，大部分内容来自网络) 一， 打包js文件和es6代码 　　　 1，webpack命令打包js文件 　　　　　 Tip: 在webpack4.x之前可以直接在命令行工具中使用webpack命令（全局安装了webpack），webpack4.x之后需要安装webpack-cli 　　　　　　 1 webpack --entry .\src\app.js --output ./src/b.js --mode development 　　webpack --entry <入口文件>　--output <输出文件> --mode 模式　 更多具体参数可以：webpack --help Config options: -- config Path to the config file [string] [ default : webpack.config.js or webpackfile.js] --config-register, - r Preload one or more modules before loading the webpack configuration [array] [ default : module id or path] --config- name Name of the

一、 React 项目起步 配置 官网： https://reactjs.org/ 文档： https://reactjs.org/docs/hello-world.html 中文： http://react.css88.com/ 2013 年被开源， 2014 年在中国彻底火爆。 React 是 CMD 架构，现阶段需要 webpack 打包 npm install -g webpack@4.9.1 必须安装以下三个依赖： npm install --save-dev babel-core babel-loader babel-preset-env React 采用 jsx 语法， JSX 语法是什么？ 就是全球唯一标准的 JavaScript 和 XHTML 结合开发最优雅的语法。 浏览器不识别 JSX 语法，所以需要 babel 将 JSX 语法翻译， babel 要装一个新的 preset npm install --save-dev babel-preset-react 安装完依赖，修改 webpack.congif.js 文件中的 preset 配置： const path = require('path' ); module.exports = { entry: "./www/app/main" , output : { path: path.resolve(_

扩展运算符：…运算符 好处： 简化书写长度，提升开发效率。 具备两个 功能： 1、展开功能 2、收集功能 所以…运算符又可以叫做展开收集运算符。 他的不同作用需要在不同场景中使用才会出现 ： a、读 - 展开作用， 输出、打印的情况。读完输出散列的值 读取arg2这个数组，并返回散列的项 1 var arg2 = [1,2,3,4,5 ]; 2 3 console.log(...arg2); // 读，展开数组成散列的项 b、写 - 收集作用， 写入、整合的情况。写完得到一个数组 把实参这些散列项写入到args里边并返回一个数组 function test(...args){ console.log(args); // 写，把散列的项写入到一个数组中 } test( 1,2,3,4,6); 不光这一种用法，他还可以有选择性的写： 如下图，把扩展运算符写到最后，前边有单独的行参： * 但是尝试把…写在行参中间，就会报错： 展开作用 【读】 的 应用： 用法一：把聚合的值展开成散列的值。 var arg2 = [1,2,3,4,5 ]; console.log(...arg2); // 读，展开数组成散列的项 // 比如写…[1,2,3] 相当于写 1,2,3 观察了一下babel编译后的代码，是让log调用时 使用apply的原理调用： 往apply的第二个参数处传入一个数组

概念 Webpack是一个 模块打包机 ，它可以将我们项目中的所有js、图片、css等资源，根据其入口文件的依赖关系，打包成一个能被浏览器识别的js文件。能够帮助前端开发将打包的过程更智能化和自动化。 WebPack和Grunt以及Gulp相比有什么特性 Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。 开始使用 安装webpack，目前webpack已更新到4.x版本，且大力度宣传的是 cli 方式启动，更推崇的是让开发者使用高度封装的 cli。基于此，我们应该安装 webpack^4.1.1、webpack-cli^2.0.10 (想要执行webpack的命令必须有这个包) 、webpack-dev-server^3.1.0。 webpack的mode webpack4 的 mode 给出了两种配置： development 和 production 。生产模式下，启用了 代码压缩、作用域提升（scope hoisting）、 tree-shaking，使代码最精简；开发模式下，相较于更小体积的代码，提供的是打包速度上的优化。所以，我们一般配置2个文件，webpack.dev.conf

什么是Loader? 继上两篇文章webpack工作原理介绍（ 上篇 、 下篇 ）,我们了解到 Loader：模块转换器，也就是将模块的内容按照需求装换成新内容 ，而且每个Loader的职责都是单一，只会完成一种转换，所以我们一般对源文件的处理，也是由多个Loader以链式顺序执行的方式来进行多次装换，然后得到我们要的结果。 那么这样Loader只需要关心输入和输出，Loader其实是一个Node.js模块，该模块导出的是一个函数（意味着，所有node.js的api我们都可以使用），如下： module.exports = function (source) { // 对source做一系列的转换 return source; } 下面我们介绍一下webpack提供了哪些供Loader调用的api，对Loader有个比较深刻的理解，然后来分析 babel-loader 的源码，看看我们常用的loader是怎么编写出来的。 获得Loader的options const loaderUtils = require('loader-utils'); module.exports = function(source) { // 获取用户为当前Loader传入的options console.log(loaderUtils.getOptions(this)); return source;

前言 谈到 babel 肯定大家都不会感觉陌生。 桌面端组件库 Element ，借助 babel-plugin-component ，我们可以只引入需要的组件，以达到减小项目体积的目的。 使用 babel-polyfill ，开发者可以立即使用 ES 规范中的最新特性。 有了插件： transform-vue-jsx 、 react ，我们在 vue 和 react 开发中可以直接使用 JSX 编写模板。 组件能按需引入到底是怎么实现的？ Babel 的工作原理是怎样的呢？ 带着疑问，我们尝试对其原理深入探索和理解。 Babel 编译的三个阶段 Babel 是一个 JavaScript 编译器。 和大多数其他语言的编译器相似， Babel 的编译过程可分为三个阶段： 解析 Parse ：将代码字符串解析成抽象语法树（ AST ）。简单来说就是对 JS 代码进行词法分析与语法分析。 转换 Transform ：对抽象语法树进行转换操作。这里操作主要是添加、更新及移除。 生成 Generate ： 根据变换后的抽象语法树再生成代码字符串。 解析 Parse Babel 会把源代码抽象出来，变成 AST 。 可以看看 var answer = 6 * 7; 抽象之后的结果。 { "type" : "Program" , // 根结点 "body" : [ { "type" :

本文会带你简单的认识一下webpack的loader，动手实现一个利用md转成抽象语法树，再转成html字符串的loader。顺便简单的了解一下几个style-loader，vue-loader，babel-loader的源码以及工作流程。 md2html-loader源码地址 loader简介 webpack允许我们使用loader来处理文件，loader是一个导出为function的node模块。可以将匹配到的文件进行一次转换，同时loader可以链式传递。 loader文件处理器是一个CommonJs风格的函数，该函数接收一个 String/Buffer 类型的入参，并返回一个 String/Buffer 类型的返回值。 loader 的配置的两种形式 方案1: // webpack.config.js module .exports = { ... module: { rules : [{ test : /.vue$/ , loader : 'vue-loader' }, { test : /.scss$/ , // 先经过 sass-loader，然后将结果传入 css-loader，最后再进入 style-loader。 use: [ 'style-loader' , //从JS字符串创建样式节点 'css-loader' , // 把 CSS 翻译成 CommonJS

文章概览 babel-preset-env是非常重要且常用的一个插件预设，掌握它的用法以及实现原理非常有必要。 本文主要内容包括：babel-preset-env是什么、入门实例、如何配置以支持特定版本的 node/浏览器、实现原理等。 本文所有例子可以在 笔者的github 找到。 babel-preset-env简介 首先，介绍下历史背景，对了解和学习 babel-preset-env 有帮助。 最初，为了让开发者能够尽早用上新的JS特性，babel团队开发了babel-preset-latest。这个preset比较特殊，它是多个preset的集合(es2015+)，并且随着ECMA规范的更新更增加它的内容。 比如，当前(2018.06.02)，它包含的preset包括：es2017、es1016、es2015。 到了明年，可能它包含的preset就包括：es2018、es2017、es2016、es2015。 随着时间的推移，babel-preset-latest 包含的插件越来越多，这带来了如下问题： 加载的插件越来越多，编译速度会越来越慢； 随着用户浏览器的升级，ECMA规范的支持逐步完善，编译至低版本规范的必要性在减少（比如ES6 -> ES5），多余的转换不单降低执行效率，还浪费带宽。 因为上述问题的存在，babel官方推出了babel-preset-env插件

前言 React.createElement 是React中一种创建React组件的方式，它古老而神秘。 虽然日常开发中已经很少能够见到他的身影。但是将JSX用babel编译之后，就是 createElement 函数 ReactDOM.render 是React实例渲染到dom的入口方法 React.createElement 参数 createElement 支持传入n个参数。 type：表示你要渲染的元素类型。这里可以传入一个元素Tag名称，也可以传入一个组件（如div span ul li 等，也可以是是函数组件和类组件） config：创建React元素所需要的props。包含 style，className 等 children：要渲染元素的子元素，这里可以向后传入n个参数。参数类型皆为 React.createElement 返回的React元素对象。 React.createElement(type, config, children1, children2, children3...); 复制代码 createElement 方法 我们新建一个JS文件，导出一个 createElement 函数。 方法内置一个 props 变量。将我们的 config 对象本身所有的属性完全copy到 props 上 function createElement ( type,