babel

1、 npm 和 cnpm 的区别 相信很多人都不太明白 npm 和 cnpm 到底是什么东东， 为啥在国内要用 淘宝镜像使用 cnpm， （1） 两者之间只是 node 中包管理器的不同哟， （2） npm是node官方的包管理器。cnpm是个中国版的npm，是淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm : （3）如果因为网络原因无法使用npm下载，那cnpm这个就派上用场了。 　　一定切记切记，npm和cnpm只是下载器的不同，好像npm用人力板车去拉包，而cnpm却使用货车去运包。 而存包的地址则在下文nrm的查看， 2、 nrm的使用 很多人都说如果 npm 速度不够快。 继而使用 npm install -g cnpm --registry=https://registry.npm.taobao.org 这个命令行 就可以使用 cnpm 了。 但是它的实质是 　　（1）全局安装 cnpm 　　（2）并且将安装 ' 包 '（各种包） 的地址切换到 国内的淘宝镜像 这里面省略了一个很重要的东西，就是 nrm 的使用，这个包的功能可以让我们随意的切换我们下载包的地址。 　　（1）如果装好了 cnpm 可以， cnpm i nrm -g 　 （2）nrm ls 查看所有 包下载路径， 也就是存放包的不同位置，自然就有取包的速度区分 　　 　　（3

最近前端圈最火的技术，莫过于5-13发布的deno1.0版本，很多大兄弟私信问我怎么看这个技术， 今天上午录了个视频放B站，对文字稿不感兴趣的直接移步 Deno1.0 新特性了解一下B站链接 deno是什么 deno和nodejs差不多，都是一个javascript的服务器运行时，和node.js还是一个作者，他有那些优点呢 新特性关键点（代码） 原生支持typescript javascript和webassembly es6 modules ，通过url和文件import 没有npm，node_modules 和package.json 依旧基于V8 安全控制机制 不兼容node 兼容浏览器 常见工具内置 deno bundle替代babel webpack deno fmt 替代prettier deno test 期待jest deno lint 替代eslint等 安全性和原生ts支持很亮 什么技术会火 deno比node优化的地方，都是小优化，一个新技术能不能普及，这个技术本身够不够牛逼只是以方便，还有 0. 出现时机是不是填补了领域空白 填补空白后，开发者有没有跟上，贡献繁荣的生态 生态繁荣后吗，有没有大公司实战案例（意味着大流量和岗位） 单纯的技术优势，只是小玩具，而且你怎么知道node不会加上这些特性，维护自己的防护林呢 ，比如node也跟进url import

今年算是经历颇多的一年了，腾讯和华为都走了几趟（一共面试了四个部门），拿了两个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 的配置

L1-032 Left-pad (20分) 根据新浪微博上的消息，有一位开发者不满 \(NPM（Node\) \(Package\) \(Manager）\) 的做法，收回了自己的开源代码，其中包括一个叫 \(left-pad\) 的模块，就是这个模块把 \(javascript\) 里面的 \(React/Babel\) 干瘫痪了。这是个什么样的模块？就是在字符串前填充一些东西到一定的长度。例如用 * 去填充字符串 GPLT ，使之长度为 \(10\) ，调用 \(left-pad\) 的结果就应该是 ******GPLT 。 \(Node\) 社区曾经对 \(left-pad\) 紧急发布了一个替代，被严重吐槽。下面就请你来实现一下这个模块。 输入格式： 输入在第一行给出一个正整数 \(N(\leqslant 10^4)\) 和一个字符，分别是填充结果字符串的长度和用于填充的字符，中间以 \(1\) 个空格分开。第二行给出原始的非空字符串，以回车结束。 输出格式： 在一行中输出结果字符串。 输入样例1： 15 _ I love GPLT 输出样例1： ____I love GPLT 输入样例2： 4 * this is a sample for cut 输出样例2： cut 代码： #include<bits/stdc++.h> using namespace std; int

曾经我觉得我自己已经很了解箭头函数了，不可能再被坑了。可是前几天我遇到了一个很奇怪的问题，在苦恼了很久后，发现就是箭头函数带来的坑。因此，就有了这一篇文章~ 问题描述 比如我有一个基类 Animal，它有一个基础方法 sayName。之后每一个继承于它的子类，都需要自己实现这个 sayName 方法来证明自己的身份。基类代码实现很简单: class Animal { sayName = () => { throw new Error ( '你应该自己实现这个方法' ); } } 复制代码 那么我现在要继承于 Animal 基类来实现一个 Pig 子类，实现也很简单： class Pig extends Animal { sayName() { console .log( 'I am a Pig' ); } } 复制代码 诶，这么简单就搞定了吗？哪里有坑啊？然而，实际上跑起来你就会发现，结果不如预期： 诶，为什么会这样呢。到底哪里出现了问题呢？这短短的几行代码，为啥就能报错呢。 发现问题 经过一顿折腾之后，最后发现是箭头函数的坑。我们只需要把 Animal 基类的 sayName 改为 普通函数，或者把 Pig 子类的 sayName 改为箭头函数，就可以解决这个问题。那么，箭头函数到底搞了什么鬼呢？ 写到这里，我忽然想起来，这个问题我曾经被一个面试官面试过

使用mobx5，针对babel 7.0+版本。折腾了好长时间，总算可以了。 如下： 在babel.config.js 文件中加入： plugins: [ [ '@babel/plugin-proposal-decorators', { 'legacy': true } ] ] 来源： oschina 链接： https://my.oschina.net/jack088/blog/4310374

问题背景 javascript是一门高度灵活的语言，尤其是其Promise的异步编程模式，是其它语言争相学习的两大异步编程方法之一(另一个是Go语言的协程)。 抛开弱类型这个亦优亦缺的特点不谈，非空检查无疑是javascript里面为数不多的丑陋代码了： //最简的写法，如果调用链中有一环为空，会departmentName的类型会是什么？ const departmentName = staff&&staff.department&&staff.department.name; // 比较靠谱点的写法 const departmentName = staff?staff.department?staff.department.name:null:null; 解决方案 作为一门广受欢迎的语言，怎么能没有像Swift和Kotlin这样优秀的空值安全语法呢？ 其实js的空值安全语法 可选链式调用"?." 和 空值合并"??" ，已经做为ECMAScript标准提案被接纳了进 ecma262 这个标准： // 可选链式调用?. +++++++++++++++++++++++++++++++++++++++++++++++++ const adventurer = { name: 'Alice', cat: { name: 'Dinah' } }; const dogName =

1、使用 高版本 的 Webpack 和 Node.js 2、 多进程/多实例构建 ：HappyPack(不维护了)、thread-loader 3、压缩代码 webpack-paralle-uglify-plugin uglifyjs-webpack-plugin 开启 parallel 参数 (不支持ES6) terser-webpack-plugin 开启 parallel 参数 多进程并行压缩 通过 mini-css-extract-plugin 提取 Chunk 中的 CSS 代码到单独文件，通过 css-loader 的 minimize 选项开启 cssnano 压缩 CSS。 4、 图片压缩 使用基于 Node 库的 imagemin (很多定制选项、可以处理多种图片格式) 配置 image-webpack-loader 5、缩小打包作用域 exclude/include (确定 loader 规则范围) resolve.modules 指明第三方模块的绝对路径 (减少不必要的查找) resolve.mainFields 只采用 main 字段作为入口文件描述字段 (减少搜索步骤，需要考虑到所有运行时依赖的第三方模块的入口文件描述字段) resolve.extensions 尽可能减少后缀尝试的可能性 noParse 对完全不需要解析的库进行忽略

项目地址： medux-react-admin 点击在线预览 在 上篇 中主要说明了本项目的一些主要思路，现在来看看具体代码：本项目使用 @medux/react-web-router + antd4 开发，全程使用 React Hooks，并配备了比较完善的脚手架。 安装及运行 // 注意一下，因为本项目风格检查要求以 LF 为换行符 // 所以请先关闭 Git 配置中 autocrlf git config --global core.autocrlf false git clone https://github.com/wooline/medux-react-admin.git cd medux-react-admin yarn install 复制代码 以开发模式运行 运行 yarn start ，会自动启动一个开发服务器。 开发模式时 React 热更新使用最新的 React Fast Refresh 方案，需要安装最新的 React Developer Tools。 以产品模式运行 首先运行 yarn build-local ，会将代码编译到 /dist/local 目录 然后进入 /dist/local 目录下，运行 node start.js ，会启动一个产品服务器 Demo 配置不同的运行环境 /conf 目录下可以为不同的运行环境设置不同的配置 /public

背景 webpack 迭代到4.x版本后，其源码已经十分庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。但是为了了解其内部的工作原理。让我们尝试从一个最简单的webpack配置入手，从工具设计者的角度开发一款低配版的webpack。 开发者视角 假设某一天，我们需要开发一个react单页面,这个页面有一行文字和一个按钮，每次点击按钮的时候文字都会发生变化。于是我们在 [项目根目录]/src 下新建了三个简单的react文件(为了模拟 webpack 根据模块追踪打包的流程，我们建立了一个简单的引用关系: 1 2 3 4 5 // index.js import React from 'react' import ReactDom from 'react-dom' import App from './App' ReactDom.render( < App /> , document.querySelector('#container')) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 // App.js import React from 'react' import Switch from './Switch.js' export default class App extends