[JS]使用babel 转译 ES7 的 Async function(适用于浏览器)--3(完)

本篇主旨：透过babel转译使用Async function的js档,使其可在浏览器(非Node环境)运行
上篇

阅前注意：

本篇为个人使用笔记,为供未来使用,会包含一些琐碎的设定
新手发文,还请多多包涵并给予指教
流程为个人尝试以及思考的脉络,未必是最佳化的流程

Step0 思考

既然babel透过@babel/plugin-transform-runtime这个plugin转译后的js会使用require来引入额外的function,我们退回到在第0章Step4转译出regeneratorRuntime却找不到的阶段,试图用其他方法找出该如何使用regeneratorRuntime。

Solution0 npm!

历经几番周折,查阅google与npm,发现不只我也这个疑问,故有大神将regeneratorRuntime抽出来作为套件发布在npm上,他所提供的用法为:

// CommonJSrequire("regenerator-runtime/runtime"); // ECMAScript 2015import "regenerator-runtime/runtime.js";

然而我们的目的是不用require/import的状况下使用regeneratorRuntime,所以我们把透过npm载下来的runtime.js以一般的js引入index.html中

<!--大神的套件--><script src="./node_modules/regenerator-runtime/runtime.js" defer></script><!--babel转译后包含async function的js--><script src="./dist/index.js" defer></script>

成功拉！

我在async function中写了一个fetch function取得资料并输出至console,在经历以上操作后,终于在console中见到庐山真面目！

然而事情并没有那么简单,这个套件虽然解决了在转译后的文件require/import的问题,然而,这个套件本身适用于ES6的环境,也就是说,在不支援ES6的浏览器中既使引入该套件,亦无法正常执行,只能说这是允许在ES6环境时的一个解决方案。

Solution1 Webpack

第二个思路是将regeneratorRuntime注入转译后的js,有些朋友或许能心有灵犀的想到Webpack专门恰好在此,碍于篇幅,我们略过webpack的基本环境建置。

以下为webpack的基本环境建置后的步骤：

安装babel-loader-让webpack在打包js时先透过babel转译,.babelrc已在前面设定过编辑webpack.config.js

var path = require("path");module.exports = {  entry: {    //为index.js注入包含regeneratorRuntime的polyfill    index: ["@babel/polyfill",path.resolve(__dirname, "src/index.js")]  },  output: {    path: path.join(__dirname, "dist"),    filename: "[name].js",  },  module: {    rules: [      {        //透过babel转译js档        test: /\.js$/,        loaders: ["babel-loader"],        include: path.join(__dirname, "src"),      },    ],  }};

执行webpack

npx webpack

成功拉！

完成上述步骤后便可以得到dist/index.js,可以正常运行于浏览器啦！

Summary

经历一番周折,今天总结出：

太新的js特性(async等)透过babel转译后未必能直接使用官方为补足新特性所提供的解决方案适用于CommonJS环境(会使用require),不适用于浏览器Webpack方案虽可以解决所有问题,同时衍伸出问题将@babel/core作为依赖注入js,造成转译后的档案十分肥大(包含regeneratorRuntime以外的功能都会注入)若多个档案都需要参考到@babel/core建议将@babel/core单独输出成一个js,在需要他的js前引入他今天就研究这么多吧！希望有观众有更好的解决方案,大家一起进步吧！