masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > 怎样利用插件工具将ES6的代码转化成ES5

怎样利用插件工具将ES6的代码转化成ES5

php中世界最好的语言
Lepaskan： 2018-03-10 14:08:58
asal
3218 orang telah melayarinya

这次给大家带来怎样利用插件工具将ES6的代码转化成ES5，利用插件工具将ES6的代码转化成ES5的注意事项有哪些，下面就是实战案例，一起来看一下。

ES6转化为ES5的工具有很多,下面介绍babel来转化ES6代码;

在npm环境下:cd 到项目目录;

npm init -y

npm install babel-cli -g (先全局安装babel-cli);

npm install babel-cli babel-preset-es2015 --save-dev(本地安装这两个);

项目目录:

1.png

其中.babelrc文件内容为:

1

2

3

4

5

6

7

{

    "presets": [

        "es2015"

    ],

    "plugins": [

    ]

}

Salin selepas log masuk

1

2

3

4

5

6

7

8

9

10

11

12

13

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>转化test</title>

    <script src="dist/index.js"></script>

</head>

<body>

    <h3>hello ECMA SCRIPT 6</h3>

</body>

</html>

Salin selepas log masuk

./src/index.js 内容为;

1

2

let name = "liuliu";

console.log(name);

Salin selepas log masuk

let是es6的语法;简单测试一下;

最后: babel src/index.js  -o  dist/index.js  (不要省略o,不然结果直接会在终端输出,不会生成文件)

可以看到.dist/index.js被转化的结果;

浏览器打开后也会看到变量输出;

一般使用如webpack等构件工具都依赖项都会有babel;这里只是不用自动构件工具做平时测试使用或单一的引用到项目;

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

webpack3.x的entry,output,module解析

Vue2 tab切换选项卡的方法

Atas ialah kandungan terperinci 怎样利用插件工具将ES6的代码转化成ES5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
kod alat pemalam
Artikel sebelumnya：commonJS与es6规范的引入导出 Artikel seterusnya：ES6的变量的作用域与声明详解
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan