babel转换ES6为ES5

准备几个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来编译。

  1. npm init
  2. npm i babel-cli babel-preset-env browserify -D

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

  1. 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('唱歌');
    }
};
  1. 打包 npx browserify dist/js/app.js -o dist/bundle.js

因为浏览器不识别require语法。
在这里插入图片描述
dist/js/app.js 是目标文件
-o 是输出选项,将文件输出到某个位置。
最终打印结果
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值