ECMAScript 6 学习之路（一）

lbn0

2019-06-27

在学习ES6之前我们需要先配置一下环境，因为除了chrome之外大都浏览器对ES6都支持的不是很好

ES6环境搭建目录结构

| dist
| src
    - index.js
| index.html
| .babelrc

初始化

$ npm init -y

安装

$ cnpm install --save-dev babel-preset-env babel-cli

// .babelrc
{
    "presets": [
        "env"
    ]
}

// index.html
<!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>ES6</title>
</head>
<body>
    ES6
    <script src="./dist/index.js"></script>
</body>
</html>

// index.js
let a = 10;
console.log(a);

执行

$ babel src/index.js -o dist/index.js
// 在dist下就会产生一个index.js

// 或者创建一个npm 命令
// package.json
{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src/index.js -o dist/index.js"  // 【修改处】
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.6.1"
  }
}

// 这样就可以使用npm 命令了
$ npm run build
// 同样有效

// 你会发现dist/index.js已经被转换了
"use strict";

var a = 10;
console.log(a);

这样一个ES6的执行环境就配置完毕了~~

babel-node

babel-cli自带了一个babel-node提供了支持ES6的REPL环境，它支持node的REPL功能，而且还可以直接运行ES6代码

$ cnpm install -g babel-cli

直接执行ES6代码

// 直接执行ES6代码
$ bebel-node
> (x=>x*2)(1)
2

执行ES6脚本

$ bebel-node es6.js

babel

lbn0

0 关注 0 粉丝 0 动态

关注关注

一分钟入门 Babel（下一代 JavaScript 语法的编译器）

我们假设取名index.js，放在项目根目录的src文件夹里。其实跟第一种差不多。我们需要自己在scripts字段里添加命令，命令内容与第一种方法的一样，这里只不过省了--presets es2015。这里 ES6+ 说的是ES6、ES7、ES8等。在根目

82530995 2020-10-15

typescript配置alias的详细步骤

注意"baseUrl": "./",不能省去，否则ts报Option 'paths' cannot be used without specifying '--baseUrl' option.错误

ruanhongbiao 2020-08-16

ES6-Babel-Browserify模块化教程

备注：第一步操作后Babel将es6的模块化语法，转换成了CommonJS模块化语法，所以需要第二步用Browserify再次编译。ES6的模块化分为导出与导入两个模块。在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。如

FEvivi 2020-06-16

ES 之 babel

npm install --save-dev @babel/core @babel/cli @babel/preset-env. npm install --save-dev @babel/plugin-transform-arrow-functions.

FEvivi 2020-06-13

vue 项目按需引入多个ui组件库

在做项目的过程中遇到了公司组件库没有的组件，这个时候需要按需引入elementUI ，同时公司的组件库也是按需引入的，减少项目的体积。话不多说直接上代码：。plugins: [[‘some-plugin‘, {}],[‘some-plugin‘, {},

PANH 2020-06-12

gulp js文件压缩 es6 代码转换

// 暂时用下面这个 npm install gulp-babel @babel/core @babel/preset-env. gulp jsmin-------------------------------------- // 代码压缩npm ins

zhongweinan 2020-06-10

webpack打包原理

//分析-哪些是源码-哪些是依赖,我们借助babel插件：安装：npm i @babel/parser --save. 安装babel/parser：npm i @babel/parser --save 分析文件中哪些是源码哪些是依赖。安装babel

PANH 2020-06-07

手把手实践教你删除项目当中无用的npm包

在公司中，我们大部分都是多人共同开发和长时间维护一个项目，但是有时候我们会发现有很多已经废弃的npm 包存在 package.json 中，我们想要删除，但是又不能盲目的删除？

PANH 2020-06-01

babel-plugin-import配置babel按需引入antd模块

"import","libraryName":"antd","libraryDirectory":"es",

82530995 2020-05-10

（6）webpack使用babel插件的使用

为什么要使用babel插件？首先要了解babel插件是干嘛的，随着js的语法规范发展，出现了越来越多的高级语法，但是使用webpack打包的时候，webpack并不能全部理解这些高级语法，需要我们使用一些插件来把高级语法，转为低级语法后打包。babel就是

webfullStack 2020-04-26

理解Babel是如何编译JS代码的及理解抽象语法树(AST）

很多浏览器目前还不支持ES6的代码，但是我们可以通过Babel将ES6的代码转译成ES5代码，让所有的浏览器都能理解的代码，这就是Babel的作用。Babel的编译过程和大多数其他语言的编译器大致相同，可以分为三个阶段。比如我们在 .babelrc里配置的

zhongweinan 2020-04-24

Babel 及其工作原理

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其它环境中。首先把原始代码转成抽象语法树，然后基于这个 AST 做转换，每个转换被处理成插件

FEvivi 2020-04-17

babel一些插件用法

babel-plugin-dynamic-import-node //支持import.then()写法 babel-plugin-dynamic-import-webpack //支持import.then()写法

FEvivi 2020-04-15

在create-react-app脚手架上实现Ant Design按需加载

["import", { libraryName: "antd", style: "css" }] // `style: true` 会加载 less 文件。但如果是用的create-react-

zhongweinan 2020-03-03

[AST Babel Plugin] Hanlde ArrowFunction && FunctionExpression

Now we need to think about functionExpression and ArrowFunction:

zhongweinan 2020-02-21

[AST Babel] Create a simple babel plugin

+ const [, major, minor, patch] = _versionRegex.exec

PANH 2020-02-19

es6转码和package.json中的配置

"test": "echo \"Error: no test specified\" && exit 1",运行npm start或npm run start=npm run bu

PANH 2020-01-23

对Babel的研究1

Babel解析器是Babel中使用的JavaScript解析器。默认情况下启用了最新的ECMAScript版本。支持JSX，Flow，Typescript。支持实验语言建议。由于@RReverser和@marijnh的出色工作，因此很大程度上基于acorn

zhongweinan 2020-01-21

让mocha支持ES6模块的方法实现

mocha是比较常用的node测试框架，但是只支持commonjs模块，要让mocha支持ES6模块，需要babel的帮助。$ npm i -D @babel/cli @babel/core @babel/preset-env @babel/registe

上海彭彭 2020-01-14

gulp常用插件之gulp-babel使用

gulp-babel这是Babel的Gulp插件。此自述文件适用于gulp-babel v8 + Babel v7检查7.x分支以了解使用Babel v6的文档。更多使用文档请点击访问gulp-babel工具官网。安装gulp-babel，如果你想获得的下

yinuoqingqin 2020-01-13

安科网

ECMAScript 6 学习之路（一）

lbn0

lbn0

相关推荐

一分钟入门 Babel（下一代 JavaScript 语法的编译器）

typescript配置alias的详细步骤

ES6-Babel-Browserify模块化教程

ES 之 babel

vue 项目按需引入多个ui组件库

gulp js文件压缩 es6 代码转换

webpack打包原理

手把手实践教你删除项目当中无用的npm包

babel-plugin-import配置babel按需引入antd模块

（6）webpack使用babel插件的使用

理解Babel是如何编译JS代码的及理解抽象语法树(AST）

Babel 及其工作原理

babel一些插件用法

在create-react-app脚手架上实现Ant Design按需加载

[AST Babel Plugin] Hanlde ArrowFunction && FunctionExpression

[AST Babel] Create a simple babel plugin

es6转码和package.json中的配置

对Babel的研究1

让mocha支持ES6模块的方法实现

gulp常用插件之gulp-babel使用

lbn0

ECMAScript 6 学习之路 （ 一 ）

相关推荐

ECMAScript 6 学习之路（一）