babel

点击上方“ 咸鱼学Python ”，选择“ 加为星标 ” 第一时间关注Python技术干货！ 原文地址:http://www.goyth.com/2018/12/23/AST/ 相关内容推荐 JS 逆向高阶 | JS 逆向的噩梦 - AST 抽象语法树 为什么要了解AST 如果你想了解 js 编译执行的原理，那么你就得了解 AST，目前前端常用的一些插件或者工具，比如说javascript转译、代码压缩、css预处理器、elint、pretiier等功能的实现，都是建立在 AST 的基础之上。 JavaScript 编译执行流程 js执行的第一步是读取 js 文件中的字符流，然后通过词法分析生成token，之后再通过语法分析生成 AST（Abstract Syntax Tree），最后生成机器码执行。 词法分析 词法分析，也称之为扫描（scanner），简单来说就是调用 next() 方法，一个一个字母的来读取字符，然后与定义好的 JavaScript 关键字符做比较，生成对应的Token。Token 是一个不可分割的最小单元，例如 var 这三个字符，它只能作为一个整体，语义上不能再被分解，因此它是一个 Token。词法分析器里，每个关键字是一个 Token ，每个标识符是一个 Token，每个操作符是一个 Token，每个标点符号也都是一个 Token。除此之外

点击上方“ 咸鱼学Python ”，选择“ 加为星标 ” 第一时间关注Python技术干货！ 作者：yacan8 原文：https://github.com/yacan8/blog/blob/master/posts/JavaScript抽象语法树AST.md 前言 Babel为当前最流行的代码JavaScript编译器了，其使用的JavaScript解析器为 babel-parser [1] ，最初是从 Acorn 项目 fork 出来的。Acorn 非常快，易于使用，并且针对非标准特性(以及那些未来的标准特性) 设计了一个基于插件的架构。本文主要介绍 esprima [2] 解析生成的抽象语法树节点， esprima 的实现也是基于Acorn的。 解析器 Parser JavaScript Parser 是把js源码转化为抽象语法树（AST）的解析器。这个步骤分为两个阶段： 词法分析（Lexical Analysis） [3] 和 语法分析（Syntactic Analysis） [4] 。 常用的JavaScript Parser： • esprima [5] • uglifyJS2 [6] • traceur [7] • acorn [8] • espree [9] • @babel/parser [10] 词法分析 词法分析阶段把字符串形式的代码转换为 令牌（tokens

本案例是爬的一部小说，爬取并存在本地 使用了动态浏览器头部信息，和 动态ip代理, 这2个方式可以有效的伪装自己，不至于被反爬，然后拉黑，之前已有记录，浏览器头部信息，也记录的有， app.js import request from ' request ' ; import userAgents from ' ./common/userAgent.js ' ; import Promise from ' bluebird ' ; import cheerio from ' cheerio ' ; // 类似jquery写法 import fs from ' fs ' ; const Iconv = require( ' iconv ' ).Iconv; const iconv = new Iconv( ' GBK ' , ' UTF-8 ' ); const URL = ' http://www.qb5200.org/xiaoshuo/62/62493/ ' ; let pageUrl = `${URL} 6161384 .html`; // 章节存放变量，初始化是第一章地址 // 这里只做测试，所以用变量存，而实际应用中，应该使用数据缓存 const expiryTime = 5 * 60 * 1000 ; // 过期间隔时间，毫秒 let ips = null ; //

本节我们来学习配置 ES6 的 JavaScript 运行开发环境，通过 babel 把 ES6 转码为 ES5 。 选择一个编辑器 首先我们选择一个编辑器，然后在这个编辑器下配置 ES6 的 JavaScript 运行环境。这里我们选择 Visual Studio Code ，当然也可以选择其他的编辑器，例如 WebStorm ，大家可以根据自己的喜好选择。 如果我们要使用 Visual Studio Code ，可以到官网下载，地址为： https://code.visualstudio.com/ 。大家根据需求下载 VSCode 相应版本的安装包，然后进行安装。 安装好后的 VSCode 界面如下所示： 下载并安装Node.js 接着我们需要下载并安装 Node.js ，官网下载地址为： https://nodejs.org/en/ ，下载并安装好后，可以通过 node -v 来查看 Node.js 的安装版本，如果出现版本号则表示安装成功，例如： Node.js 中含有 npm 软件包管理工具，所以我们安装好 Node.js 的同时就安装好了 npm 。 创建项目 然后我们可以创建一个项目，执行 npm init 初始化命令，根据显示的问题输入配置信息，如果全部默认选择默认值，可以直接执行 npm init -y 命令，这样就不用再一次次按回车了。执行完命令之后

作为开发人员，我们一直在寻找让我们的代码更快更好的方法。但在此之前，编写高性能代码需要做三件事： 了解语言及其工作原理 基于用例进行设计 调试!修复!重复 记住这一点 任何傻瓜都可以编写计算机可以理解的代码，优秀的程序员编写人类可以理解的代码。- 丁·福勒 我们来看看如何使 JavaScript代码运行得更快。 延迟 延迟算法将计算延迟到需要执行时才执行，然后生成结果。 const someFn = () => { doSomeOperation() return () => { doExpensiveOperation() } } const t = someArray.filter((x) => checkSomeCondition(x)).map((x) => someFn(x)) // 现在，如果有需要在执行 t.map((x) => t()) 最快的代码是未执行的代码，所以尽量延迟执行。 JavaScript 使用原型继承，JS 中所有对象都是Object的实例。 MDN说： 尝试访问对象的属性时，不仅会在对象上搜索该属性，还会在对象的原型，原型的原型等上搜索该属性，直到找到匹配属性名或原型链的末端。 对于每个属性，JavaScript引擎都必须遍历整个对象链，直到找到匹配项。 如果使用不当，这会占用大量资源，并影响应用程序的性能。 所以不要这样： const name

Babel 通过语法转换器支持最新版本的 JavaScript 。 它有非常多的插件，这些插件能够允许我们立刻使用新语法，无需等待浏览器支持。 那我们怎么使用babel呢？ 首先我们来了解babel基本的安装 第一：babel的安装 第二：查看babel版本以及babel命令 第三步：建立文件夹，初始化一个仓库，将我们的配置写成一个package.json文件。 第四步：新建一个文件，并单独输出其编译之后的文件，这是单个文件的监听。 第五步：新建文件夹，将之前所建的test.js文件移动到文件夹内，删除之前监听的输出后的单个文件，再进行文件夹的监听。 现在整个工程目录如下 第六步：当我们工程中需要使用babel的时候，我们使用 cnpm install babel-cli --save-dev来进行安装，当前项目依赖babel-cli。 我们可以使用babel-node去运行文件 接下来我们来看看babel如何来解析ES6/ES7的语法。 第一步：创建.babelrc文件，在文件中写入 第二步：下载相关的preset,并将babel去做一个监听，将src目录下的项目编译到dist目录下。 在文件中写入 使用 可以看到这个编译之后的代码 编译之前代码如下 通过代码可以看到其实编译出来的代码并不精简 我们可以通过安装 再在.babelrc里面进行修改 通过运行 查看编译之后的结果

loader承担的是翻译官的职责，利用其弥补了让webpack只能理解JavaScript和JSON文件的问题，从而可以处理其它类型的文件，所以loader对webpack的重要性不言而喻，所以学习构建一个loader是学习webpack的必经之路。在学习编写一个loader之前，要明确一下loader的职责： 其职责是单一的，只需要完成一种转换 。下面将逐步阐述选择loader开发中的几个关键点并实现一个loader。 一、Loader分类 loader是一个CommonJs风格的函数，接收输入的source后可通过同步或异步的方式进行处理，然后将内容进行输出。 1.1 同步Loader 同步loader指的是同步的返回转换后的内容。由于是在Node.js这样的单线程环境，所以转换过程会阻塞整个构建，构建缓慢，不适用于耗时较长的环境中。对于同步loader，主要有两种方法返回转换后的内容：return和this.callback. return 利用return可直接返回转换后结果。 module.exports = function ( source , map, meta){ // ... // output为处理后结果 return output； } this.callback 该方法相比于return更加灵活，其参数主要有四个： this.callback( err:

初始化项目 mkdir rollup-datav-libs cd rollup-data-libs npm init -y npm i rollup -D 在package.json文件中添加dev命令 "dev":"rollup" { "name": "rollup-datav-libs", "version": "1.0.0", "description": "datav commponents library", "main": "index.js", "scripts": { "dev":"rollup" }, "author": "liuyi<794516454@qq.com>", "license": "ISC", "devDependencies": { "rollup": "^2.34.2" } } 在src目录下创建一个空文件 index.js用来测试打包效果 console.log('hi rollup') export default { } 在根目录下创建rollup配置文件rollup.config.dev.js const path=require('path') const inputPath=path.resolve(__dirname,'./src/index.js') const outputPath=path.resolve(__dirname

lodash提供了很多可用的方法供我们使用，绝对是一个很好用且用起来得心应手的工具库。但是同时，lodash的体积也不小，我们项目中使用的大概522K，可能只是使用了几个方法，但是却把整个lodash库引入了。为了吃几条鱼，就承包了整个鱼塘，代价有点大呀！ 对于这个问题，有几种方案可供选择。 一.引入单个函数 　lodash整个安装完之后，引用方式： lodash/function 格式，单独引入某个函数，如 let _trim= require('lodash/trim') 或者 import trim from 'lodash/trim' 　或者 lodash 中的每个函数在 NPM 都有一个单独的发布模块，单独安装并引用部分模块，然后按以下方式引用 let _trim= require('lodash.trim') 或者 import trim from 'lodash.trim' trim(' 123123 ') 二.借助 lodash-webpack-plugin，babel-plugin-lodash插件优化 　 　使用上述两种方式，在使用较多个lodash中方法的情况下，不太美观，且并不方便。那么我们可以借助于lodash-webpack-plugin，去除未引入的模块，需要和babel-plugin-lodash插件配合使用。类似于webpack的tree

基础认识 官网 特点 声明式编程 组件化 支持客户端和服务端渲染 高效 虚拟DOM，不总是直接操作DOM，只是减少DOM的操作,操作虚拟DOM不会对页面进行重绘，当渲染的时候，才会进行渲染 DOM Diff 算法，最小化页面重绘，就是当页面变化时，通过计算那部分需要重绘，只重绘当前部分，减少页面的重绘区域 单向数据流 js文件 react.js：react的核心库 react-dom.js：提供操作DOM的react扩展 babel.js：解析jsx语法 <div id="app"></div> <script src="js/react.development.js"></script> <script src="js/react-dom.development.js"></script> <script src="js/babel.min.js"></script> <script type="text/babel"> // 创建虚拟DOM元素对象 let vDom = <h1>react hello</h1> // 将虚拟DOM渲染到页面真实DOM容器中 ReactDOM.render(vDom,document.getElementById('app')) </script> JSX react提供了创建虚拟DOM的方法 虚拟DOM对象最终都会被react转换为真实的DOM