babel | 易学教程

vue首屏优化方案

阅读更多关于 vue首屏优化方案

前言：最近用vue-cli 3.0 构建一个小型的工单管理系统，完工后build发现一个chunk-vendors包就达到985kb，加上其他一些资源文件，首页的下载总共大小快要2M。测试给的第一个反馈就是首屏慢慢慢慢慢！根据首屏加载资源文件过大，进行一下优化： 1. 路由懒加载结合Vue的异步组件再结合webpack的代码分割，我们可以轻松的实现路由懒加载。 ️vue-cli 3.0 模式就使用了Babel，我们需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。 // 安装插件 syntax-dynamic-import cnpm install --save-dev @babel/plugin-syntax-dynamic-import // 修改babel.config.js module.exports = { "presets": [ "@vue/app" ], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" }, "syntax-dynamic-import" ] ] } // 修改路由组件的加载（router/index.js） { path: '/', name: 'home'

0503_es6 搭建es6环境

阅读更多关于 0503_es6 搭建es6环境

先建立一个项目的工程目录，并在目录下边建立两个文件夹：src和dist src：书写ES6代码的文件夹，写的js程序都放在这里。 dist：利用Babel编译成的ES5代码的文件夹，在HTML页面需要引入的时这里的js文件编写index.html：文件夹建立好后，我们新建一个index.html文件。 !DOCTYPE html> <html lang= " en " > <head> <title></title> <meta charset= " UTF-8 " > <meta name= " viewport " content= " width=device-width, initial-scale=1 " > <script src= " ./dist/index.js " ></script> </head> <body> Hello ECMA Script 6 </body> </html> 编写index.js 在src目录下，新建index.js文件。这个文件很简单，我们只作一个a变量的声明，并用console.log()打印出来。 let a= 1 ; console.log(a) 初始化项目在安装Babel之前，需要用npm init先初始化我们的项目。打开终端或者通过cmd打开命令行工具，进入项目目录，输入下边的命令： npm init -y

vue-cli脚手架——3.0版本项目案例

阅读更多关于 vue-cli脚手架——3.0版本项目案例

一、【准备工作】 node与git部分见 vue-cli2.0 搭建案例 vue-cli3.0 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件： CLI ： @vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令） CLI 服务： @vue/cli-service 是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供如： serve 、 build 和 inspect 命令） CLI 插件：给Vue 项目提供可选功能的 npm 包（如： Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试等）全局安装过旧版本的 vue-cli (1.x 或 2.x)要先卸载它，否则vue -V查看依旧是2.x旧版： npm uninstall vue-cli -g // 或者 yarn global remove vue-cli vue-cli3.0需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+，你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本） node -v // 查看版本安装@vue/cli（vue-cli 3.0的包名称由 vue-cli 改成了 @vue

ES6 系列之 Babel 将 Generator 编译成了什么样子

阅读更多关于 ES6 系列之 Babel 将 Generator 编译成了什么样子

摘要： ## 前言本文就是简单介绍下 Generator 语法编译后的代码。 ## Generator ```js function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending'; } ``` 我们打印下执行的结果： ```js var hw = hel 前言本文就是简单介绍下 Generator 语法编译后的代码。 Generator function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending'; } 我们打印下执行的结果： var hw = helloWorldGenerator(); console.log(hw.next()); // {value: "hello", done: false} console.log(hw.next()); // {value: "world", done: false} console.log(hw.next()); // {value: "ending", done: true} console.log(hw.next()); // {value: undefined, done: true} Babel 具体的执行过程就不说了，我们直接在

ES6 系列之 Babel 是如何编译 Class 的(下)

阅读更多关于 ES6 系列之 Babel 是如何编译 Class 的(下)

摘要： ## 前言在上一篇 [《 ES6 系列 Babel 是如何编译 Class 的(上)》](https://github.com/mqyqingfeng/Blog/issues/105)，我们知道了 Babel 是如何编译 Class 的，这篇我们学习 Babel 是如何用 ES5 实现 Class 的继承。 ## ES5 寄生组合式继承 ```js function Pare 前言在上一篇《 ES6 系列 Babel 是如何编译 Class 的(上)》，我们知道了 Babel 是如何编译 Class 的，这篇我们学习 Babel 是如何用 ES5 实现 Class 的继承。 ES5 寄生组合式继承 function Parent (name) { this.name = name; } Parent.prototype.getName = function () { console.log(this.name) } function Child (name, age) { Parent.call(this, name); this.age = age; } Child.prototype = Object.create(Parent.prototype); var child1 = new Child('kevin', '18'); console.log

ES6标准入门第一章：简介

阅读更多关于 ES6标准入门第一章：简介

ECMAScript 6 是JavaScript 语言的下一代标准；发布于2015年，又称为ECMAScript 2015。 ECMAScript 方言还有 JScript 和 ActionScript。 ECMAScript 与 JavaScript 的关系：前者是后者的规范，后者是前者的一种实现。一个完整的JavaScript实现包含 ECMAScript 、DOM、 BOM 三部分。 babel 转码器： Babel 是一个广为使用的ES6转码器，可以将ES6代码转为ES5代码，从而在浏览器或其他环境执行； // 转码前 input.map(item => item +1 ); // 转码后 input.map( function (item) { return item + 1 ; }) 命令行环境 Babel 的命令行版本通过下面的命令安装： $ npm install --global babel- cli $ npm install --save babel-preset- es2015 // 然后在当前目录下新建配置文件 .babelrc 并写入以下代码 { "presets": ['es2015' ] } Babel 自带一个babel-node 命令，提供支持ES6 的 REPL 环境。它支持Node.js 的REPL环境的所有功能

Es6简介

阅读更多关于 Es6简介

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 ECMAScript 和 JavaScript 的关系一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。因此，ECMAScript 和

石川es6课程---1-2、ES6简介

阅读更多关于石川es6课程---1-2、ES6简介

石川es6课程---1-2、ES6简介一、总结一句话总结：从ECMAScript的历史发展来看，太顺了的时候总会遇到一挫折，比如ecma4 1、ECMAScript 和 JavaScript关系？ ECMA 是标准，JS 是实现 2、解决ie9兼容性问题的在线编译？用browser.js/babel <! DOCTYPE html > < html lang ="en" > < head > < meta charset ="UTF-8" > < meta name ="viewport" content ="width=device-width, initial-scale=1.0" > < meta http-equiv ="X-UA-Compatible" content ="ie=edge" > < title > Document </ title > </ head > < body > < script charset ="utf-8" src ="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js" ></ script > < script type ="text/babel" > let a = 5 ; let b = 7 ; alert(a + b); </

【webpack系列】从零搭建 webpack4+react 脚手架（一）

阅读更多关于【webpack系列】从零搭建 webpack4+react 脚手架（一）

搭建一个React工程的方式有很多，官方也有自己的脚手架，如果你和我一样，喜欢刨根究底，从零开始自己一行一行代码创建一个React脚手架项目，那你就来对地方了。本教程是针对React新手，以及对webpack还不熟悉的用户，或者是想了解当前前端工程化方案的用户。我会在整个系列通过webpack4的配置，从生产和开发环境分别入手，包含代码压缩，大文件gz压缩，webpack4的code split，postcss等插件如何引入，css编译，如何让环境支持各种css预处理器，cssModule配置化，bundle结果分析，本地代理配置，React相关技术栈等等都有一个讲解。本系列教材由浅入深，将会从零开始一步步完善整个脚手架。前提条件在开始之前，请确保安装了 Node.js 的最新版本。建议使用 Node.js 最新的长期支持版本(LTS - Long Term Support)。如果你使用旧版本，你可能遇到各种问题，因为它们可能缺少本教程用到的相关的 package 包。执行以下命令可以查看你本机安装的node版本: node -v && npm -v 如果你本机的node版本不是最新的，建议升级到新的node版本。node版本建议通过nvm进行管理，了解可以查看 http://nvm.sh 这里不再阐述。通过本课程，你会学到什么？学习完本系列教程，你将会了解（持续更新）

web-jet中 ES6 写法编写promise对象时出现报错 regeneratorRuntime is not defined

阅读更多关于 web-jet中 ES6 写法编写promise对象时出现报错 regeneratorRuntime is not defined

参考网络相关资料，解决： ① cnpm install --save-dev babel-plugin-transform-runtime ②修改.babelrc文件，原来： "plugins": ["transform-object-rest-spread", "syntax-dynamic-import"] 一行改为： "plugins": ["transform-object-rest-spread", "syntax-dynamic-import", ["transform-runtime", { "helpers": false, "polyfill": false, "regenerator": true, "moduleName": "babel-runtime" } ] ] 来源： oschina 链接： https://my.oschina.net/jsjapp/blog/4952180

订阅 babel