传统项目中如何使用babel做简单的练习使用

已于 2022-02-18 09:36:11 修改
阅读量465 收藏
点赞数
于 2021-12-10 18:09:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44634727/article/details/121862257
版权

前端

传统项目中如何使用babel

新建一个项目

在这里插入图片描述

引入Babel书写es6语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="output"></div>
    <!-- 引入Babel -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    
    <!-- 新建Babel的script标签 -->
    <script type="text/babel">
        const getMessage = () => "Hello World";
        document.getElementById('output').innerHTML = getMessage();
    </script>
</body>
</html>

结果如下
在这里插入图片描述

参考文献

如何在传统项目中使用Babel

小何程序员
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在项目中使用Babel
小天才程序员的博客乐园
07-20 6076
在项目中使用Babel以及错误解决
项目中如何使用babel6详解
weixin_33797791的博客
04-23 117
由于浏览器的版本和兼容性问题，很多es6,es7的新的方法都不能使用，等到可以使用的时候，可能已经过去了很多年。Babel可以把es6,es7的新代码编译成兼容绝大多数的主流浏览器的代码。 本篇文章主要介绍在项目中如何安装配置和使用babel. 1.在项目下初始化 package.json $ npm init 2.在项目中安装babel $ npm install babe...
在项目中使用babel
bing709的博客
04-03 1089
BABEL 做项目的时候，没有考虑到使用新技术会产生的一些问题，比如使用es6新功能，导致很多浏览器不兼容（尤其是ie）。 babel的介绍 Babel 是一个编译器。 从宏观角度看，它将运行代码分为3个阶段: 解析，转换，及生成(与其他编译器相同). babel的使用 官网提供的配置 根据自己项目需要，选择相应的工具(本次使用webpack演示) 安装 npm inst...
gulp+babel解决传统项目IE环境ES6语法兼容问题
HELLO WORD
11-28 1128
前言 ES6给我们带来便利的同时，也给我们带来了一下麻烦。当然自从chrome等浏览器对于ES6语法的全面支持以来，这种麻烦也已经降到了最低，如果你的项目完全不需要考虑兼容问题，现在你在项目中可以尽情的使用ES6，且不用做特殊处理。当然这是理想情况。 前几年我主要做的都是H5方面的开发，所以对于浏览器的兼容问题关注也不是很多。近两年的开发也都是基于VUE框架，对于vue,如果需要使用ES6并且需要...
前端学习--Bable的使用步骤
susud的博客
04-08 706
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-pre...
详解如何使用babel进行es6文件的编译
08-27
在本文中，我们将详细介绍如何使用 Babel 进行 ES6 文件编译，并对编译过程进行配置。 一、安装 Babel 首先，我们需要安装 Babel，可以使用 npm 进行安装。打开命令行工具，输入以下命令： ``` npm i babel-cli -g...
babel的使用及安装配置教程
08-27
另一方面，这样做也无法支持不同项目使用不同版本的 Babel。 三、设定转码规则 设定转码规则需要在项目根目录下安装 Babel preset： ``` cnpm install babel-preset-es2015 --save-dev ``` 然后创建配置文件 ....
在Vue项目中使用Typescript的实现
10-15
在实际操作中，由于Vue 3.0正式版的推迟发布，开发者在Vue 2.x项目中使用Typescript时，需要手动配置Webpack来处理TS和TSX文件。首先，我们需要在`webpack.config.js`中进行如下配置： 1. 设置入口文件（entry）和...
ES6通过babel转码使用webpack使用import关键字
08-31
Babel是一个广泛使用的JavaScript编译器，它的主要任务是将ES6+的语法转换为ES5，以便在不支持新特性的浏览器中运行。例如，Babel可以将`import`和`export`转换为CommonJS或UMD（Universal Module Definition）格式...
use-babel:babel练习项目
05-10
这个名为"use-babel:babel练习项目"的压缩包文件，显然是一个关于Babel配置和实践的学习资源，旨在帮助开发者理解和掌握Babel的使用。 **Babel简介** Babel是一个广泛使用的转码器，它的核心功能是将ES6+的语法...
JavaScript中使用 Babel 的流程
戴翔的技术博客
10-24 3494
0.什么是Babel Babel 是一个 JavaScript 编译器，具有以下特性。 Babel 本身可以编译 ES6 的大部分语法； ES6 Module 语法一般需要使用 Webpack 来处理； Babel 本身不能编译 ES6 新增的 API，需要借助其它的模块。 1.使用 Babel 的流程 1.安装 Node.js（https://nodejs.org/en/），在项目根目录初始化项目，生成 package.json 文件。 cmd C:\Users\Daixiang\Desktop\de
JS拓展：Babel(解决低版本浏览器对es语法的兼容)
weixin_41350225的博客
03-06 5009
JavaScript版本 ECMAScript ECMAScript 是跨多个平台的许多厂商实施的不断发展的标准,JavaScript是其实现（同时也好有其他实现，不过JavaScript是主流） ES5发布 在2009年，在Java的神奇崛起之前。JavaScript第五版（es5）正式发布 ES6发布 时隔六年，2015年JavaScript第六版(es6)发布,此后，由于前端占据...
通过babel-register在nodejs端使用es6
热门推荐
shidaping的博客
05-08 1万+
nodejs对es6的支持并不好，像class, import这些关键字，react的jsx都无法使用。但是babel可以将这些都转化为es5。此处讲讲如何在node端使用babel。 babel-register可以理解成一个小插件，将es6的东西转成es5。使用很简单，只需要在文件中加入 require('babel-register'); 即可。它还可以接收一个babel的配置作为参数
React框架核心知识及代码
我也是全粘工程师啦
07-29 1635
因此，应为函数指定描述性名称。React-Router提供一种被称为客户端路由的东西，通过客户端路由可以将URL地址和React组件进行映射，当URL地址发生变化时，它会根据设置自动的切换到指定组件，并不是由服务器处理，而是通过客户端路由进行切换。在React中，Hooks就是把某个目标结果钩到某个可能会变化的数据源或者事件源上，那么当被钩到的数据或者事件发生变化时，产生这个目标结果的代码会重新执行，产生更新后的结果。React的严格模式，在处于开发模式下，主动的重复调用一些函数，使他们的副作用显现。...
Babel 配置基础用法
、子筱的博客
12-29 4290
Babel转码器 babel是一个广泛使用的ES6转码器，可以将ES6代码转换为ES5代码，从而在老版本浏览器执行。 初始化项目 命令行 生成package.json文件 npm init @babel/core 这个包主要是对代码进行转换的核心方法 npm install --save-dev @babel/core @babel/cli这个是内置的cli，可以让我们从命令行来编译我们的文件 npm install --save-dev @babel/cli @babel/preset-env，最新
如何下载babel.js到本地
boysky0015的博客
01-25 1万+
搜了好多都存在问题，还有人需要金币才能下载。还是官网靠谱。 https://www.babeljs.cn/docs/setup/#installation &amp;amp;lt;!-- 加载 Babel --&amp;amp;gt; &amp;amp;lt;script src=&amp;quot;https://unpkg.com/babel-standalone@6/babel.min.js&amp;quot;&amp;amp;gt;&amp;
babel通过script标签引入无法解决低版本的ie兼容es6的问题（非解决方案，谈下遇到的坑）
hijk7的博客
05-08 289
babel通过script标签引入无法解决低版本的ie兼容es6的问题（非解决方案，谈下遇到的坑）
1分钟了解js编译器Babel的使用（附demo）
Mr.Tang的博客
08-13 981
什么是Babel？ 一款JavaScript 编译器 主要用于在旧的浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的 JavaScript 代码。 单文件使用方法详解： 1、初始化创建 package.json文件 npm init 2、安装 babel npm install --save-dev babel-cli 3、使用规则 编译目录 npx babel src（原目录） --out-dir lib（目标目录） npx babel src（原目录） --ou.
web前端练习21----使用babel，让es6兼容所有的浏览器
翟浩浩Android专栏
10-05 671
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' 项目结构：...
Java 中使用 Babel 和 Polyfill 编译 ES6 代码 案例
最新发布
06-01
好的，我可以为你提供一个使用 Babel 和 Polyfill 编译 ES6 代码的案例。 首先，你需要安装 Babel 和相关的插件。你可以通过 npm 来安装，命令如下： ``` npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/polyfill ``` 接下来，你需要创建一个 `.babelrc` 文件，这个文件用来配置 Babel 的转换规则。你可以将以下代码复制到 `.babelrc` 文件中： ``` { "presets": [ ["@babel/preset-env", { "useBuiltIns": "usage", "corejs": 3 }] ] } ``` 这里的 `"useBuiltIns": "usage"` 表示根据代码中使用的功能自动引入相应的 Polyfill，`"corejs": 3` 表示使用 Core.js 版本 3。 接下来，你可以在你的 ES6 代码中使用新特性，例如： ``` const arr = [1, 2, 3]; const newArr = arr.map(item => item * 2); console.log(newArr); ``` 然后，你可以使用以下命令将 ES6 代码编译为 ES5 代码： ``` npx babel src --out-dir lib ``` 这里的 `src` 表示源代码目录，`lib` 表示编译后的代码目录。 最后，你需要在你的 HTML 文件中引入 Polyfill： ``` <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=default"></script> ``` 这里的 `features=default` 表示引入所有的 Polyfill，你也可以根据你的需要修改它。 以上就是使用 Babel 和 Polyfill 编译 ES6 代码的一个简单案例。希望能对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值