【ES】笔记-使用Babel对ES6模块化代码进行转换

初始化项目

在项目跟目录下执行npm init -y初始化项目

npm init --yes

安装依赖

同样项目根目录下执行npm install babel-cli babel-preset-env browserify -D

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

npm i babel-cli babel-preset-env browserify

npm i（i 是 install缩写） babel-cli babel-preset-env browserify -D（这样安装是局部安装）

注意：用npm i安装的模块无法用npm uninstall删除，用npm uninstall i才卸载掉

使用命令对我们的代码进行编译

因为我们是局部安装，所以使用npx来执行babel命令

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

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

这是我们在index.html文件里引入dist/app.js文件，并提供vscode的liverServer将其打开，这是你就会发现浏览器控制台有个报错：

这是因为浏览器不能识别require语法，我们需要对编译过的文件再进行一次打包，执行以下命令:

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

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

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

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

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);

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

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