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语法，都能正确运行代码了
网友评论