0 前言懵逼的狗蛋

从前，有个狗蛋，好吧，那个狗蛋就是我。

有一天，狗蛋用WebGL写了一段动画，在chrome、firefox跑的可溜了。

当狗蛋测试IE的时候，IE明晃晃的提示，某行有错误，而那行只有一句话，class Vector2{。

原因是，IE不支持ES6。

懵逼，大写的懵逼，早知道我就直接写ES5好了。

我特么又不是专业的程序员，我不在乎什么ES5、ES6，我只要迅速表达我的想法。

可是已经写好的几千行代码，手动改回来是不可能了。

上个周手动从ES5改到ES6的，那时候代码量还不大，从来只知道升级，鬼知道js还需要降级。

没办法，babel学起来。

1 安装node.js和npm

babel运行在node.js上，它由npm（node package manager）管理，所以安装babel之前需要先安装node.js和npm。

$ sudo apt-get install nodejs /* 安装nodejs */

$ sudo apt-get install npm /* 安装npm */

最新的node是10.15，apt-get安装的是8.10，狗蛋决定先这么用了。

2 使用babel

2.1 全局还是本地

babel有两种安装方法，全局安装、本地安装。

全局安装指的是，一次安装，到处使用。

本地安装指的是，只对当前项目有效，穿上裤子出了门就不认识了，灵活性比较高。

综上，狗蛋决定要本地安装，在安装之前需要先建立项目。

2.2 什么是项目

所谓建立项目，就是建一堆文件夹。

狗蛋以前是干工程（建筑）的，感觉这跟干工程一样一样的。

老板说搞个项目，狗蛋就用彩钢板弄一堆临建，里边有没有人办公先不用管。

2.3 搞起来

2.3.1 建立项目

$ mkdir goudan /* 建立根目录 */

$ cd goudan /* 进入根目录 */

$ mkdir src /* 建立源代码目录 */

$ mkdir dist /* 建立发布目录 */

$ npm init /* 初始化项目 */

需要填写一堆信息，不知道怎么填的就回车。

这也跟狗蛋干工程一毛一样的，有没有人干活先不管，给公司、财务、业主、监理的报备材料是要有的。

$ ls /* 看看npm init干了什么，原来丫的建了个package.json */

$ vim package.json /* 看看package.json里都有啥，就是刚才填的那些信息，果然就是一张报备表 */

$ :q /* 看一眼就好，看一眼就走，跟狗蛋巡视项目现场一毛一样的 */

2.3.2 安装babel

$ npm install --save-dev babel-cli /* 安装babel，主角终于来了 */

$ ls /* 看看babel干了啥，它建了个目录叫node_modules，另外在package.json里添加了点东西 */

这跟施工队进场一毛一样，带来了一堆施工设备，相应的往报备表里填写信息。

$ ./node_modules/.bin/babel --version /* 查看babel的版本 */

$ npm install babel-preset-env --save-dev /* 安装babel-preset-env */

babel-preset-env的功能是把ES6转成ES5，babel只是个包工头，babel-preset-env才是干活的老师傅。

$ ls /* 看看babel-preset-env干了嘛，好像啥也没干，它住在包工头的宿舍里，但他在报备表里有一行信息 */

3 干活

babel的功能是把ES6转成ES5，官方的说法可能不大一样。

这也跟干工程一毛一样的，投标方说的天花乱坠，但是狗蛋经理就只想让它干眼前这个low逼的活。

3.1 设置工作条件

$ vim .babelrc /* 建立.babelrc文件，内容如下 */

{
"presets": ["env"]
}

狗蛋经理用这个文件告诉包工头babel，今天的活指定env老师傅出场，env是babel-preset-env的昵称。

3.2 准备原材料

狗蛋经理需要自己准备ES6，作为babel工作的原材料。

$ vim src/goudan.js /* 建立源代码文件，内容如下 */

class Gou{
constructor(){
this.name = "goudan";
};
sayHello(){
return "Hello, I am goudan.";
};
}

3.3 干活

$ ./node_modules/.bin/babel src --outdir dist /* 下达作业指令，把src里的材料加工好放到dist */

$ ls dist /* 看一眼工作成果，确实有个文件被生成了 */

3.4 验证工作成果

$ vim index.html /* 创建一个html文件，内容如下 */

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var gou = new Gou();

console.log(gou.sayHello());

</script>

</body>

</html>

用IE打开index.html，按F12，到控制台查看输出结果，与预期一致，说明工作成果有效。

4 未完

用babel完成了从ES6到ES5的翻译，其实工作还没完成，还需要使用webpack打包，把工作成果打包成类似于three.js、babylon.js那样的文件。按下不表。

狗蛋与babel的初遭遇相关推荐

狗蛋（驱动小白）和老王（硬件老司机）关于硬件那点事儿的一次密谈
引子 "老王,有个bug啊,很紧急啊?" QA急忙反馈到. "什么问题? 老王心里咯噔了下,心想,NND,被QA缠住,看来今晚又得和我的躺椅相依为伴了." &q ...
李狗蛋和二狗子因为HTTP or RPC打起来了No.135
[╮(╯_╰)╭一个小故事] 从前有两个程序员,一个叫李狗蛋一个叫二狗子,正在启动一个 web 项目.李狗蛋说我们系统交互就用HTTP听我的准没错.二狗子说,为什么我们不用RPC呢听我的准没错?李狗蛋 ...
CSDN日报20170525 ——《狗蛋的寻亲之路，结识嵌入式世界的那只狗》
程序人生 | 狗蛋的寻亲之路,结识嵌入式世界的那只狗作者:老王明明 Tux 提供给了狗蛋这么好的一个稳定的 OS 系统,偏偏遇到一个猪一样的队友写的程序,Tux 真的很无奈.终于有一天它看不下去了 ...
(文末有彩蛋)最新版快手去水印遭遇滑块验证，对刚还是绕行？最新快手去水印解析原理与源码。
上篇文章我写了快手喜提新域名之后的新的解析策略.最近一两天快手方面又出了新的应对策略.我上次的源码已经无法使用,返回了滑块验证.大家都讨论起了OpenCV,要搞图像识别处理,TAT. 我在浏览器端对 ...
妈妈生了我，ChatGPT淘汰了我爸爸
当我还在老妈肚子的时候,经常听见老爸老妈讨论我该叫什么名字,那时他们争吵的火力十足,我在里面可真是干着急,但是因为不知道我是男是女,所以讨论了半天,最终也是无疾而终. 等我出生以后,老爸那个急的啊,早 ...
9999元雷军新宠亮相！机器狗铁蛋，能走能遛能空翻，小米机器人实验室第一款产品...
明敏发自凹非寺量子位报道 | 公众号 QbitAI 谁能想到,今年的雷军年度演讲,竟然带了条狗出来. 这就是小米第一代仿生四足机器人:CyberDog. 当然你也可以叫它如雷贯耳的中文名: 铁 ...
［异能程序员］第六章遛狗（第二更）
铭万商场身处要地,交通顺畅,附近的车站自然有很多.李林没费多少功夫,便来到了车站. 此时已经夜里9点多,在车站候车的人自然不多.就在李林觉得等车无聊之时,一行六个彪形大汉一起来到了车站,似乎也是在等车 ...
到底谁才能击败星巴克？|【常垒·常识】
常垒·观点我与K先生面见于上周三的一个下午.K先生目前专注于消费和零售的顾问,洞见深刻. 目前中国的零售消费(有品牌露出),具备产业升级的机会: 1. 各类VC投资了一堆SaaS,尽管营收不一定好, ...
电竞帮服务器未响应,电竞人物传记：这男人，让游戏服务器崩溃了一小时
原标题:电竞人物传记:这男人,让游戏服务器崩溃了一小时两周前,RNG在MSI上成功夺冠.为了回报玩家的热情,腾讯英雄联盟运营团队决定在上周六组织战斗之夜活动.活动当晚,大批召唤师玩家响应组织的号召, ...

狗蛋与babel的初遭遇

0 前言懵逼的狗蛋

1 安装node.js和npm

2 使用babel

2.1 全局还是本地

2.2 什么是项目

2.3 搞起来

2.3.1 建立项目

2.3.2 安装babel

3 干活

3.1 设置工作条件

3.2 准备原材料

3.3 干活

3.4 验证工作成果

4 未完

狗蛋与babel的初遭遇相关推荐

最新文章

热门文章

狗蛋与babel的初遭遇

0 前言 懵逼的狗蛋

1 安装node.js和npm

2 使用babel

2.1 全局还是本地

2.2 什么是项目

2.3 搞起来

2.3.1 建立项目

2.3.2 安装babel

3 干活

3.1 设置工作条件

3.2 准备原材料

3.3 干活

3.4 验证工作成果

4 未完

狗蛋与babel的初遭遇相关推荐

最新文章

热门文章

0 前言懵逼的狗蛋