babel转换ES6为ES5

最新推荐文章于 2024-06-21 17:21:59 发布

项哈哈想做前端

最新推荐文章于 2024-06-21 17:21:59 发布

阅读量1.9k

点赞数

分类专栏： ES6 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45780818/article/details/122481203

版权

ES6 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

准备几个js文件。

// test1
export default {
    hobbit: function () {
        console.log('唱歌')
    }
}

// test2
const age = 18;
function talk() {
    console.log('今年18')
}

export {
    age, talk
}

// test3
export const name = '张三';
export function speck() {
    console.log('我叫张三')
}

// app.js
import * as t1 from './src/test1.js'
import * as t2 from './src/test2.js'
import * as t3 from './src/test3.js'

console.log(t1, t2, t3)

// index.html
<!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>
    <script src="./app.js" type="module"></script>
  </body>
</html>

如果想要在html打开谷歌浏览器时，正常打印数据，需要通过vscode一个插件Live Server方便浏览。
打印结果如下
在这里插入图片描述
现在通过babel来编译。

npm init
npm i babel-cli babel-preset-env browserify -D

babel-cli是babel的一个命令行工具，babel-preset-env是一个预设包，可以把最新的es特性做一层转换（es5),browserify是一个比较简单的打包工具。

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

因为我这里是局部安装，所以需要用npx，全局安装就直接使用babel，第一个参数src/js是目标文件，-d代表转换完的结果存到某个文件夹下，dist/js是存放路径，–presets=babel-preset-env是使用预设包编译。当然可以写成一个脚本

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "babel-test": "npx babel src/js -d dist/js --presets=babel-preset-env"
},

这样就会被（例如test1.js)就会被转换成es5代码

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.default = {
    hobbit: function hobbit() {
        console.log('唱歌');
    }
};