前端学习--Bable的使用步骤

最新推荐文章于 2024-08-31 09:15:49 发布

susud

最新推荐文章于 2024-08-31 09:15:49 发布

阅读量759

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/susud/article/details/124044757

版权

1、安装工具 babel-cli 命令行工具 babel-preset-env 预设包 browserify 打包工具（项目一般用webpack 在这里用browserify 是因为比较方便）

2、通过npx bable src/js(原js文件目录) -d dist/js(转换之后的js文件目录)

局部安装要用 npx bable命令

如果全局安装bable 可以直接使用bable命令

npx babel src/js -d dist/js --presets=babel-preset-env

3、打包

npx browserify dist/js/app.js -o dist/bundle.js

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

susud

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

web前端练习21----使用babel，让es6兼容所有的浏览器

翟浩浩Android专栏

10-05

694

es6的语法有些浏览器是不兼容的，babel可以把es6的语法全部编译成es5的，兼容所有浏览器 babel 官网 https://www.babeljs.cn 使用 babel 需要3步 1下载 babel.min.js 依赖包 2引入 <script src='babel.min.js'></script> 3设置 type='text/babel' 项目结构：...

Bable的使用

weixin_33826609的博客

03-05

3186

一、bable简介 babel是一个工具链，用于将ES6+语法转换为当前版本浏览器等环境兼容的javascript代码。babel目前已经支持了最新版本的javascript语法，对于目前尚未被浏览器支持的语法，可以通过babel插件支持。二、配置文件 Babel有两种并行的配置文件的方式，可以一起使用，也可以单独使用。项目范围的配...

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

详解如何使用babel进行es6文件的编译

08-27

主要介绍了详解如何使用babel进行es6文件的编译，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

开源项目 Babble 使用教程

最新发布

gitblog_00109的博客

08-31

252

开源项目 Babble 使用教程 babbleDiscourse Shoutbox plugin项目地址:https://gitcode.com/gh_mirrors/babbl/babble 1. 项目的目录结构及介绍 babble/ ├── README.md ├── LICENSE ├── docs/ │ ├── index.md │ └── ... ├── src/ │ ├─...

前端代码转码器 babel的使用

beginerToBetter的博客

12-07

271

babel的使用 babel可以将es6代码转换为es5风格的代码 es6风格的代码易于编写，但兼容性没有es5好 babel工具的安装 npm install --global babel-cli babel的使用编写配置文件 .babelrc { "presets":["es2015"] "plugins":[] } 进行代码的转换根据文件进行转码根据文件夹进行转码1. Babel es6/01.js -o dist/001.js 2. babel es6 -d

前端基础知识之 Babel

不知名人士的博客

07-14

2416

根据所介绍，Babel其实就是，将ES6等高级语法转换为ES6之前这些能被低级浏览器所兼容的语法的工具。可以借助官网来了解一下Babel。Babel本身可以编译ES6的大部分语法，比如let、const、箭头函数、类，但是对于ES6新增的API，比如Set、Map、Promise等全局对象，以及一些定义在全局对象上的方法（比如）都不能直接编译，需要借助其他模块。Babel一般需要配合webpack来编译模块语法。...

Bable详解和前端模块化

Zero摄氏度的博客

07-16

644

nodejs默认不支持es6语法的import，所以要降级，用bable，回顾之前bable如何使用。

2023前端面试系列-- webpack & Git篇

郊眠寺

03-10

297

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

使用脚手架（Vue-Cli）快速创建一个vue项目的步骤

qq_59808309的博客

01-22

6030

一、安装vue https://cn.vuejs.org/v2/guide/installation.html 二、先确定是否安装了node.js、npm和cnpm node.js的下载地址：Node.js NPM（node package manager）是随同node.js一起安装的包管理工具，能解决前端代码部署上的很多问题，常见的使用场景有以下几种：允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编

构建工具webpack与babel使用

weixin_44772522的博客

05-29

485

Babel入门一、Bable是什么 Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。下面是一个例子。 // 转码前 es6 let a = 10; let foo = (a) => a+1; //转码后 es5 var a = 10; var foo = function(a...

自学大前端随笔(三) 构建react环境，npm start出现babel-jest版本问题

HYQHYQ111的博客

11-09

1130

一、背景: 菜鸟刚入门react，之前学习jest的时候已经配置好了npm、bable以及npm，可以直接执行，但是在执行最后一步: npm start的时候出现了错误，报错如下: 搜了一下网上零零散散有一点和我问题相关的，大致就是说路径下的babel-jest版本有问题，路径中存在27的版本，但是构建的react环境中是26的版本，并且版本不会自动配置，所以需要使用者手动更改，官方也很贴心给出了序号1-7个操作步骤，解释如下: 1. 删除项目文件夹中的 pac...

babel.min.js-6.26

10-16

Babel:下一代 JavaScript 语法的编译器官网最新版本6.26

babel.min.js

10-29

babel.min.js的资源在网上不好找，react开发需要的东西。

【前端】Babel详解

警警的博客

07-19

1347

Babel是一个强大的JavaScript编译器，通过插件化的架构和预设功能，实现了对现代JavaScript代码的向后兼容转换。它与构建工具的集成使用，可以自动化代码转换和构建过程，提高开发效率。同时，Babel紧跟ECMAScript规范的发展，支持最新的JavaScript语言特性，帮助开发者在保持兼容性的同时使用最新的JavaScript语法和特性。

babel--前端学习（4）

greety

02-03

193

一、Babel的介绍 Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。二、安装 Babel提供babel-cli工具，用于命令行转码。它的安装命令如下： npm install --global babel-cli #查看是否安装成功 babel --version 三、Babel的使用 1、初始化项目 npm init -y 2、创建文件在当前目录下创建src/es6.js 下面是一

单独使用bable插件

weixin_33910460的博客

12-18

116

ES6转化为ES5的工具有很多,下面介绍babel来转化ES6代码; 在npm环境下:cd 到项目目录; npm init -y npm install babel-cli -g(先全局安装babel-cli); npm installbabel-clibabel-preset-es2015 --save-dev(本地安装这两个); # 转码结果输出到标准输出 $ babe...

babel的使用说明

HuangDong

07-22

911

babel是什么？ babel 是一个 JavaScript 编译器。（具体详情可以通过bable官网查看） babel的作用是什么？ babel的作用就是将浏览器不认识的高级javascript语法解析成低级的语法，来实现浏览器的兼容 webpack也可以解析高级js语法为什么还需要babel？在 webpack 中，默认只能处理一部分 es6 的新语法，一些更高级的 es6 语法或者 es7...

前端04：Axios Node Npm bable webpack+前端工程改造

leader_song的博客

07-12

1533

1、Axios（重点）2、Node3、NPM（重点）4、babel5、模块化（重点）6、webpack7、前端工程搭建8、前端工程介绍9、前端开发过程介绍10、登录改造成本地接口1、目录概览2、目录介绍1）一级目录*build //构建脚本*mock//模拟接口、数据*src//源码目录开发环境配置主配置文件2）二级目录src*api//前后端对接接口*layout//存放布局组件*router//路由目录*views//

Babel技术使用汇总

工匠精神coding，终生学习

03-28

1276

1.babel作用：把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行。2.使用方法: 使用单体文件 (standalone script) 命令行 (cli) 构建工具的插件 (webpack 的 babel-loader, rollup 的 rollup-plugin-babel)。 **多见于 package.json 中的 scripts 段落中的某条命令**3.运...

vue 引入element-ui

09-02

而在bable.config.js中，你可以添加Element-ui的插件配置，以自动按需引入Element-ui组件的样式。以下是示例代码： ``` "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": ...