使用Babel对ES6模块化代码进行转换

1.初始化项目
在项目跟目录下执行npm init -y初始化项目
2.安装依赖
同样在项目根目录下执行npm install babel-cli babel-preset-env browserify -D

babel-cli:babel的脚手架工具
babel-preset-env：将最新的es6的语法转换成es5
browserify：打包工具，类似于webpack，但是比webpack简单，一般在项目中使用webpack，在这里只是简单演示，所以选择browserify

3.使用命令对我们的代码进行编译
因为我们是局部安装，所以使用npx来执行babel命令

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

执行完之后就可以看到在我们的项目跟目录下多出了一个dist目录，里面是经过打包的js代码，如下所示:

1.png
这是我们在index.html文件里引入dist/app.js文件，并提供vscode的liverServer将其打开，这是你就会发现浏览器控制台有个报错：
2.png
这是因为浏览器不能识别require语法，我们需要对编译过的文件再进行一次打包，执行以下命令:

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

dist/js/app.js:入口文件
-o:-o后面紧跟的是打包后文件的存放路径

执行完在这个命令后，在dist目录下就生成了一个bundle.js文件，我们在index.html中引入这个文件，并在浏览器里打开，我们导入的内容就可以正确的输出了,如下所示:

1.png

当我们修改了代码之后需要重新执行：

npx babel src/js -d dist/js --presets=babel-preset-env
npx browserify dist/js/app.js -o dist/bundle.js

这两条命令，才能在控制台看到我们想要的结果，比如我修改了app.js中的代码:

import * as test1 from './test1.js'
import * as test2 from './test2.js'
import * as test3 from './test3.js'
console.log(test1.name);
console.log(test2.study());
console.log(test3.default.school);

执行完上面两条命令后，再次打开浏览器控制台就可以看到一下输出结果了:

1.png

这样转换了之后，不管我们的浏览器支不支持es6语法，都能正确运行代码了