使用father bulid后代码中js代码中报错regeneratorruntime is not defined

1,367 阅读1分钟

描述:在封装npm包时用了async/await,在使用father build时没有配置babel,导致打包出来的代码中有了regeneratorruntime is not defined 报错,(没有将代码转化为es5)

解决方案:配置babel,并在father的打包文件中进行引入

第一步:先安装:

yarn add core-js -S # 如果有则不安装
yarn add @babel/preset-env -D
yarn add @babel/runtime-corejs3 # 这里是根据core-js的版本来的,如果core-js为2x版本这里就安装yarn add @babel/runtime-corejs2

修改.fatherrc.ts文件,增加以下配置

  extraBabelPresets: [
    ['@babel/preset-env', {
      "useBuiltIns": "usage",
      "corejs": 3, // 这里是按照刚安装的版本来配,如果是安装的2x版本,这里就是2
      "debug": false
    }]
  ],
  extraBabelPlugins: [
    ['@babel/plugin-transform-runtime', {
      "corejs": 3, // 这里是按照刚安装的版本来配,如果是安装的2x版本,这里就是2
      "helpers": false,
      "regenerator": true,
      "useESModules": true
    }],
    ['@babel/plugin-proposal-private-property-in-object', {
      "loose": true
    }],
    ['@babel/plugin-proposal-private-methods', {
      "loose": true
    }]
  ]
  

补充:这里适用于vue项目中如果报错,也可按此方法进行配置,只不过在.babelrc中配置