babel——下一代 JavaScript 语法的编译器，web前端开发学习总结

这个文件很重要，添加插件都有编辑这个文件。

还可以用一个钩子关联.ES6 .es .jsx .js文件

npm install --save-dev babel-register

方法是在入口脚步头部加入：

require(“babel-register”);

当然以上方法不会对 ES6 特有的类、对象、方法进行转换, 如果需要应安装 babel-polyfill 模块：

npm install babel-polyfill --save

并在所有脚步头部加入：

require(‘babel-polyfill’);

//or

import ‘babel-polyfill’;

命令行环境

---

在项目目录中执行：

npm install --save-dev babel-cli

之后继续执行以下代码就进入 ES6 的 REPL 环境, 可以直接运行 ES6 代码：

babel-node

如果执行 js 文件, 可以：

babel-node ES6Node.js

还有一下命令把 ES6 代码转换为 ES5 代码：

转换为 ES5 并输出代码

babel ES6.js

转换 ES6.js 并输出到指定文件

babel ES6.js -o ES5.js

转换整个文件夹中的 ES6 代码文件到 ES5

babel -d build-dir source-dir

转换整个文件夹中的 ES6 代码文件到 ES5, 并生成 source.map

babel -d build-dir source-dir -s

此外还有 babel 的在线转码器：https://babeljs.io/repl

JS 文件内

---

之前已经安装了 babel-core 就可以在 JS 文件内使用 babel:

var babel = require(‘babel-core’);

// 字符串转码

babel.transform(‘code();’, options);

// => { code, map, ast }

// 文件转码（异步）

babel.transformFile(‘filename.js’, options, function(err, result) {

result; // => { code, map, ast }

});

// 文件转码（同步）

babel.transformFileSync(‘filename.js’, options);

// => { code, map, ast }

// Babel AST转码

babel.transformFromAst(ast, code, options);

// => { code, map, ast }

之后可以直接用以下代码转码:

var ES6Code = “let x = n => n + 1”;

var ES5Code = require(‘babel-core’).transform(ES6Code, {

“presets”: [“es2015”]

}).code;

得到如下代码：

“use strict”;

var x = function x(n){

return n + 1;

};

配置对象options，可以参看官方文档http://babeljs.io/docs/usage/options/。

这里举一个使用的例子：

现在想使用 babel 的 Decorator，我们需要先安装 babel-core 和 babel-plugin-transform-decorators

npm install babel-core babel-plugin-transform-decorators

然后配置 .babelrc 文件:

{

plugins: [‘transform-decorators’]

}

此时就可以用 babel 对 Decorator 转码了。
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

我特地针对初学者整理一套前端学习资料，免费分享给大家，戳这里即可免费领取

端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

我特地针对初学者整理一套前端学习资料，免费分享给大家，戳这里即可免费领取

[外链图片转存中…(img-8eKCgo3z-1712084865647)]