babel

从Git上新建一个项目demo (或者从本地新建一个demo文件夹)； 在demo文件夹下，打开cmd（或者Git Bash），安装react： npm i react react-dom 安装webpack及相关 npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin style-loader css-loader webpack-dev-server：实现热更新; html-webpack-plugin：实现自动将打包好的文件注入到页面; 如果使用less进行开发可以加上"less less-loader"; 4. 安装babel，将高级语法转换成es5 npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader 其中@babel/core是babel的核心模块，包含了babel的核心功能； @babel/preset-env支持转换ES6以及更新的js语法，并且可根据需要兼容的浏览器类型选择加载的plugin从而精简生成的代码；@babel/preset-react包含了babel转换react所需要的plugin；babel-loader是webpack的babel加载器。 5. 搭建项目结构 在demo文件夹下

前言 最近真的都是在瞎学，看到自己不是很明白的东西，都喜欢自己手动去敲1到3遍（晚上下班的时候咯）， 瞧， React 基于webpack 搭建，react 官方有一套手脚架工具，我自己也搭建过确实挺好使的，适合初学者学习学习。 但是自己还是想手动来搭建，嗯 于是写一篇不用手脚架搭建的博客，供自己加强记忆，哈哈哈 开始咯 创建项目目录 新建 react-webpack 项目 cd react-webpack 初始化 npm 环境 npm init //一路回车 package.json 文件下 其实就是记录依赖相关的 加载库 { "name": "react-webpack" , "version": "1.0.0" , "description": "" , "main": "index.js" , "scripts" : { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "yf" , "license": "ISC" } 依赖安装 npm i react -D npm i react-dom -D npm i webpack -D npm i webpack-cli -D (因为webpak 到 4版本以上 就需要这个 ，不然会报错) 创建目录 创建 src ,build 2个目录 在

ES6,ES7真的太棒了，async +await+Promise，让我阅读代码的时候不用再从左拉到右了（异步太多，一层套一层真的太头痛） 但是有个问题，打包后低版本浏览器运行不了，还有我用了一些混淆插件，不能解析es6的语法，导致混淆打包报错。 进入正题：ES6转ES5 1.安装依赖模块 npm install babel-polyfill --save-dev npm install babel-preset-es2015-ie --save-dev npm install babel-preset-env --save-dev npm install babel-preset-stage-2 --save-dev 2.在根目录创建文件 “.babelrc” touch .babelrc 3.在“.babelrc”写入配置 { "presets" : [ [ "env" , { "modules": false , "targets" : { "browsers": ["> 1%", "last 2 versions", "not ie <= 8" ] } }], "stage-2" ], "plugins": ["transform-runtime" ], "env" : { "test" : { "presets": ["env", "stage-2" ],

今年算是经历颇多的一年了，腾讯和华为都走了几趟（一共面试了四个部门），拿了两个offer。（开心.png），但还是挂了两次，有点遗憾。 面试题总结 面试完之后，赶紧总结了一波，前端这个岗位，这两家大厂的面试思路和面试问题其实都差不多： 1. JS底层： 说一说js的原型与继承。 分析一下优秀的前端框架源码，这么写的优缺点在哪。 this指向问题，this的深拷贝如何实现，这个也是高频率被问到的问题。 js事件流是怎么样体现的。 柯里化函数。 2. 数据层： 写过中间件么？ 了解koa么？ 数据安全是怎么处理的。 axios 与 fetch的实现。 3. HTTP相关： 跨域问题的产生与解决。 http1.1时如何复用tcp连接。 http2.0新的变化。 http报文的请求分成几个部分？ 前端与后台交互的时候会产生几次握手，分别做了什么？ 4. 框架： 说一说vue的源码的响应式与数据驱动，主要是问原理。 Vue与react的区别在哪，这个也是问底层实现。 虚拟dom、diff算法等等，基本没问到过怎么去使用。 像组件传值啥的没提过。还有就是路由的管理 有没有封装过组件库， dev-server是怎么跑起来的。 5. 服务端与工具 主要是Node的问题，有没有拿node做过中间层。 Node的线程处理、事件循环。 这个主要就是 webpack 与 babel 的配置

原理 1、解析一个文件及其依赖 2、构建一个依赖关系图 3、将所有东西打包成一个单文件 代码实现 文件结构 1、解析文件及其依赖 通过babylon将文件解析成AST 在线解析器 ： 代码实现： bundle.js const fs = require("fs"); const babylon = require("babylon"); const traverse = require("babel-traverse").default; let ID = 0; function createAsset(filename) { const content = fs.readFileSync(filename, "utf-8"); // 解析文件成AST const ast = babylon.parse(content, { sourceType: "module", }); const dependencies = []; // 根据AST获取相关依赖 traverse(ast, { ImportDeclaration: ({ node }) => { dependencies.push(node.source.value); }, }); const id = ID++; return { id, filename, dependencies, }; } const

H5+css3面试题总结 一、html5和html的区别： 1.html5新增了语义化标签：footer 、nav、section… 2.html5完全支持css3 3.支持本地离线存储 4.新增了canvas标签 5.新增视频和音频标签 HTML5离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 数据在浏览器关闭后自动删除。 如何区分 HTML 和 HTML5？ DOCTYPE声明 新增的结构元素 功能元素 123 二、对语义化标签的理解（优点）： a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构 b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重； c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页； d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。 三、浏览器的内核： IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink； 介绍一下你对浏览器内核的理解？ 主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。 渲染引擎

Babel 是一个 JavaScript 编译器 Babel 是一个工具链，主要用于将 ECMAScript 2015+ （ES6+，IE不支持ES6+语法，所以要支持IE，项目中引入Babel还是很有必要的）版本的代码转换为向后兼容( 向后兼容 ：兼容以前的； 向前兼容：兼容未来的 )的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情： 语法转换 通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块) 源码转换 (codemods) 以下以gulp打包工具为例： 1.安装 npm install --save-dev gulp-babel 2.使用 var gulp = require("gulp" ); var babel = require("gulp-babel" ); gulp.task( "default", function () { return gulp.src("src/app.js" ) .pipe(babel()) .pipe(gulp.dest( "dist" )); }); 3.创建 .babelrc配置文件 3.1安装preset-env npm install @babel/preset-env --save-dev 3.2创建

001 1.Vue框架 创建项目: 1. 先搭建webpack环境或在老项目中进行 2. 整个项目都是vue, 使用脚手架搭建开发环境 安装脚手架： npm install -g @vue/cli 初始化项目命令：vue create project 步骤： 第一步, vue create 后会出现 至少3个选项， （ 第一个选项是默认安装vue2,babel,eslint 第二个选项是默认安装 vue3，babel,eslint 第三个选项 (Manually select features) 自定义安装） 第二步，选择自定义安装 （第一个选项 vue的版本 第二个 babel 第三个 ts 先不选 第四个 PWA 离线缓存 第五个 Router 路由 第六个 vuex 公共数据存储 第七个 css 预处理语言 (less,sass,stylus) 第八个 linter 代码监测 第九，十个 代码测试 ） 第三步： 选择vue的版本 Class-style组件，先选no Babel 解析ts ，选y 路由模式： 是否使用history模式 选y 就是 history模式 选n 就是 hash模式 Css 预处理语言 （选项1：sass(dart-sass) 新版本的sass语法，速度比较快，一般使用sass都选这个版本 选项2：sass(node-sass) 老版本的sass语法

JS逆向学习笔记 寻找深圳爬虫工作，微信:cjh-18888 文章目录 JS逆向学习笔记 一. JS Hook 1. JS HOOK 原理和作用 原理：替换原来的方法. (好像写了句废话) 作用： 可以去Hook一些内置的函数, 例如Debugger, setInterval,JSON.stringify等等 2.JSHook 检测与过检测 原理: 其实就是检测代码是否和原来的相等. 绕过手段: 修改Function的toString方法. 3.JS过反调试 4. JSHook 对象属性 1. Object.defindPropety() 二. Chrome拓展（Chrome Extension）开发 1. 基本介绍 1. 什么是Chrome插件? 2. 学习Chrome插件开发的意义 3. 为什么是Chrome插件，而不是firefox插件? 2. 文件结构 1. manifest.json 2. content-scripts 3.background 4. event-pages 5. popup 6. injected-script 7.更多 3.实战 - Js自动注入Hook代码 1. manifest.json 2. content_script.js 三. 调试技巧 1. 快速定位关键代码 2. Conditional breakpoints 3. Reres拓展插件

劳动节就好好在家写代码了，毕竟我们现在居家就是在为国家做贡献，而且劳动节不劳动和咸鱼有什么区别，手动🐶保命。 前言 vue 3 刚出几个月，现在是一步一个坑，但是坑还是要填的，毕竟生活还是要继续的么。 目前 vue 3.x 基本上是已经可以工作了，刚出不久的那段时间还看👀到掘金上有人说生产上有 3.x ，对这种大佬只能佩服,毕竟新东西出来，光是想想出了问题，这么解决就是非常头疼的事情 比如我现在搭个脚手架基本就是一路爬过来的，还好目前还没开始深入开发，出的都是周边配套和类型这些小问题。 另外说和 react 很像的，我只能说，这不光是像，你们的代码估计都可以拷过来改改就能用了呢，看下完整的函数式组件的代码 不过 vue 的双向数据绑定用的很舒服，这个才是最主要的，毕竟手写 set 真的麻烦。 读书人的事情这么能叫抄呢？这叫借鉴，这叫共同进步 --- by 鲁迅 不过这种事情其实说多了也没意义，比如 python 和 js 或其他语言之间，你敢说没有互相借鉴。 而且前端的口号不就是：“走别人的路，让别人无路可走”，我们要团结一致，毕竟前端这个岗位真的很容易被替代掉，我们求发展，求稳定，技术人用实力说话，才能让这个岗位越走越远。 目前的脚手架的开发进度 基本上已经可以支持你跑，但是打包工具还在纠结，我喜欢 rollupjs，但是项目已经引入了 webpack，到底要不要再引一个新的