Babel的使用

最新推荐文章于 2024-11-07 18:53:09 发布

原创最新推荐文章于 2024-11-07 18:53:09 发布 · 302 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#npm #前端 #vue.js

收录于

本文详细介绍了如何在项目中使用Babel将ES2015语法转换为兼容旧环境的代码，包括初始化package.json、创建.babelrc配置、安装preset、设置编译路径及实际编译步骤。

Babel的使用

1、生成package.json文件

定位到具体需要操作文件夹下
输入指令：npm init
npm init -y（-y表示全部生成默认值）

2、创建配置文件.babelrc

定位到具体需要操作文件夹下

创建一个名为.babelrc的文件

{
    "presets": ["es2015"],
    "plugins":[]
}

3、安装解码器

npm install --save-dev babel-preset-es2015

4、设置解码路径

修改package.json文件的内容

"scripts": {
    "build":"babel src -d dist"
  }

5、编译测试

npm run build

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

路飞Fly了

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

如何创建.babelrc文件？

qq_42094027的博客

09-01

1171

方法一：根目录下，创建 .babelrc. 文件名就可以了！方法二： cmd进入根目录，输入 type null>.babelrc ，回车即可！

参与评论您还未登录，请先登录后发表或查看评论

webpack

星辰的笔记

01-26

249

es6转es5，sass转css，合并、压缩、编译js、css，热更新，本地服务器等 webpack配置文件 module.exports = { entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件 output: { path: __dirname + "/public",//打包后的文件存放的地方 filena

命令步骤

qq_42915988的博客

08-10

314

bable 安装: (1):npm install –g babel-cli (2):npm install -g cnpm –registry=https://registry.npm.taobao.org [国内域] (3):npm install –save-dev babel-preset-es2015(4):type nul&amp;amp;gt;.babelrc [创建] 文件...

babel的使用和设置

u_ndefine_d的博客

06-04

2579

babel的使用和配置，以及如何判断babel是否设置成功

Babel 安装、配置和基本使用

qq_42881675的博客

06-22

7521

原址 Babel（一）安装、配置和基本使用 Babel 是一款 JavaScript 编译器，它可以把 ECMAScript 2015+ 的代码转译成低版本兼容的代码。作用语法转换：Babel 会转译新版本的 ES 代码，比如箭头函数，解构，模板字符串或者类等。Babel 会把这些新语法转译成较低版本的代码。需要注意的是，Babel 会把 ES 模块转化为 CommonJS 模块，模块转化可以查看此文章。通过 Polyfill 添加缺失的特性，比如 Array.protorype.inclu

Babel是什么？Babel到底可以用来干嘛___一文带你从零开始认识Babel

热门推荐

Sumshine12.5

12-21

2万+

引入在此之前或许你已经用过babel，也许听说过什么 babel-loader babel-core、babel-cli、babel-plugin-…、babel-preset-env 反正各种乱七八糟的做项目随便用一一下就可以了，对他只有个一知半解，甚至不知道他到底是干什么的，反正项目要用，照着用就行了，至少博主之前的状态是这样，如果只对他有个一知半解甚至都不了解，那么项目出bug了你都不知道怎么去调试，只能复制–>粘贴–>百度。基于此，写下自己对Babel的理解。 Babel是什么？我

babel原理_浅谈babel原理以及使用

weixin_36429440的博客

12-24

1036

最近项目中遇到再安卓5.0以下的兼容问题，最后查了资料发现没有引入babel-polyfill的原因导致。后来就详细了解并整理了一下babel相关的知识点。Babel包的构成核心包babel-core ：是babel转译器本身，提供转译的API，例如babel.transform等，webpack的babel-loader就是调用这些API完成转译的babylon ：js的词法解析器babel-t...

babel的使用

hujinyuan的博客

07-30

299

一、配置文件.babelrc .babelrc 文件存放在项目的根目录下。 { "presets": [], "plugins": [] } presets 字段设定转码规则，你可以根据需要安装。 $ npm install --save-dev babel-preset-es2015 # react转码规则 $ npm install --save-dev...

剖析 Babel——Babel 总览

Jack, what else can you do besides holding your little darling?

11-03

615

名词解释 AST：Abstract Syntax Tree, 抽象语法树 DI:Dependency Injection, 依赖注入 =============================================================== Babel 的解析引擎 Babel 使用的引擎是 babylon，babylon 并非由 babel 团队自己开发的，而是 fork 的 acorn 项目，acorn 的项目本人在很早之前在兴趣部落 1.0 在构建中使用，为了是做一些代码.

Babel 入门教程

weixin_34095889的博客

06-07

692

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。这意味着，你可以现在就用ES6编写程序，而不用担心现有环境是否支持。下面是一个例子。 // 转码前 input.map(item => item + 1); // 转码后 input.map(function (item) { return item + 1...

babel 简明使用

04-27

1327

babel基础用法

babel的基本使用方法

xxxxxii的博客

07-04

2098

babel编译器 1.babel的功能 2.babel的使用特点（1）babel本身可以编译ES6的大部分语法；（2）ES6 Module语法一般使用webpack来处理；（3）babel本身不能编译ES6新增的API，需要借助其他模块。 3.babel的使用方式（1）查询babel官网的setup页面：babel官网的setuo页面；（2）一般在命令行工具（CLI）或者webpack中使用babel。 4.使用babel的流程（1）安装node.js（携带安装npm），node.js官网：n

babel的使用和原理

我的博客简介

08-03

1682

promise和generator，symbol转换不了，需要装polyfill。@babel/core：babel的核心代码，必须安装；@babel/cli：可以让我们在命令行使用babel；–out-dir：指定要输出的文件夹dist；src：是源文件的目录；

Python 项目国际化：使用 Babel 实现多语言支持

最新发布

嘉淼的博客

11-07

2282

有配置文件方式适合包含多个文件、文件结构复杂的项目。无配置文件方式适合文件结构简单的小项目或测试项目。创建 Babel 配置文件并提取文本。生成翻译文件，完成翻译。编译并加载翻译，确保程序可以显示不同语言的内容。1 、新建babel.cfg: 2 、提取翻译文本生成翻译模板pybabel extract -F babel.cfg -o messages.pot . 3 、生成翻译文件。

快速掌握Babel的使用

aaa123_456aaa的博客

11-10

1049

1.简介（1）ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。（2）Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。（3）这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。 2.安装安装命令行转码工具 Babel提供babel-cli工具，用于命令行转码。它的安装命令如下： npm install -g babel-cli #查看是否安装成功 babel --version 3.Babel的使用（1）创建babel文

正视Babel配置

jianleking的专栏

08-09

879

Babel编译安装cli依赖 npm install @babel/core @babel/cli -D “@babel/cli”: “^7.14.8”, “@babel/core”: “^7.14.8”, 一、如何配置babel？ 1.1 配置方式使用.babelrc配置使用babel.config.json配置（官网推荐方式）使用cli命令集 1.2 测试babel的三种配置编写一个带有es6语法的文件es.js，内容如下： const arr = [1,2,3,4] arr

babel使用入门

12-07

1万+

前言：随着ES6普及的范围越来越广，学习并使用它是势在必行的，在正式学习ES6之前，必须对ES6的转换器要熟悉，知名度比较大的是Traceur和babel，今天我就来整理一下我在学习配置babel时的步骤以及遇到的坑，因为刚开始学习，所以写的并不全，之后遇到的坑以及心得，也都会在这里更新，如有不足，欢迎指出。

JS & 介绍 Babel 的使用及 presets & plugins 的概念

Thinking anywhere anytime.

06-17

3547

Babel 给 ES6/7/8/9 Typescript、React / Vue3 JSX 等"语法糖"带来无限的可能。

Babel的使用方法

小小喵的博客

02-06

1779

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。这意味着，你可以现在就用ES6编写程序，而不用担心现有环境是否支持。下面是一个例子。 //转码前 input.map( item => item+1 ); //转码后 input.map(function(item){ return item+1; }) 上面的原始代码用了箭头函数，这个特性还没有得到...