利用Babel对ES6模块化代码举行转换

手机游戏开发者 · 2024-10-3 23:51:55

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代码，如下所示:

这是我们在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-envnpx 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语法，都能精确运行代码了

利用Babel对ES6模块化代码举行转换

所属分类: 问答交流

新帖推荐: 30日

推荐作品