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

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

阅前注意：

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

Step0 建立npm环境

切换到你要使用的目录,并执行terminal

//初始化npm环境-y为简单设定,会跳过命名等详细设定npm init -y

Step1 建置babel环境

安装相关套件,terminal执行

//@babel/cli 提供在terminal使用指令 //@babel/core 提供主要转译Api//@babel/preset-env 为babel目前主要的转译集合环境npm install --save-dev @babel/cli @babel/core @babel/preset-env

Step2 建立.babelrc

在专案根目录建立.babelrc档(用来设定如何编译)

{    //preset为编译时使用的编译环境,这裏对应到Step1时安装的@babel/preset-env    "presets": ["@babel/env"]}

Step3 设定npm scripts

为了使用方便,打开package.json,并如下设定scripts部分

"scripts": {    //将src档下所有的js档编译至dist下    "trans": "babel src -d dist"}

此时可以在src/下撰写一些js并测试,指令如下

//这里对应到scripts里的trans,也就是实际执行的指令npm run trans

Step4 撰写async function

现在的转案目录应该如下

.├──node_modules├──src├──.babelrc├──package-lock.json├──package.json

在src/下新增index.js,并撰写

const asyncFunc=async ()=>{    //非同步区块,可以使用await};

开启termial,执行

npm run trans

执行完毕后,会看到新增了dist资料夹,我们开启后打开index.js,可以看到如下

"use strict";function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }var asyncFunc = /*#__PURE__*/function () {  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {    return regeneratorRuntime.wrap(function _callee$(_context) {      while (1) {        switch (_context.prev = _context.next) {          case 0:          case "end":            return _context.stop();        }      }    }, _callee);  }));  return function asyncFunc() {    return _ref.apply(this, arguments);  };}();

Step5 一切看似美好,但挑战才刚开始

经过上面一连串操作,我们似乎已经把ES7才具有的async function透过babel转译为在旧环境可执行的js。
然而,当我们把这份js在html中引入后,便会发现console报错啦！

看倒这样的讯息,首先的反应是regeneratorRuntime为什么会找不到呢！？
由此引发出后面的故事，我们敬请期待!

下一篇