rollup+babel打包出错问题 解决丢失async await 不能使用的问题regeneratorRuntime is not defined

(!) Unresolved dependencies
https://rollupjs.org/guide/en#warning-treating-module-as-external-dependency
@babel/runtime/regenerator (imported by src\module\ajax\downloadString.js, src\module\ajax\downloadUrl.js, src\module\ajax\loadResource.js, src\module\ajax\FetchLimiting.js, src\module\array\asyncFlatMap.js)
@babel/runtime/helpers/asyncToGenerator (imported by src\module\ajax\downloadString.js, src\module\ajax\downloadUrl.js, src\module\ajax\loadResource.js, src\module\ajax\FetchLimiting.js, src\module\array\asyncFlatMap.js)
@babel/runtime/helpers/toConsumableArray (imported by src\module\ajax\FetchLimiting.js, src\module\array\asyncFlatMap.js)
@babel/runtime/helpers/classCallCheck (imported by src\module\ajax\FetchLimiting.js, src\module\date\strToDate.js, src\module\event\watchEventListener.js)
@babel/runtime/helpers/createClass (imported by src\module\ajax\FetchLimiting.js)
(!) Missing global variable names
Use output.globals to specify browser global variable names corresponding to external modules
@babel/runtime/regenerator (guessing '_regeneratorRuntime')
@babel/runtime/helpers/asyncToGenerator (guessing '_asyncToGenerator')
@babel/runtime/helpers/toConsumableArray (guessing '_toConsumableArray')
@babel/runtime/helpers/classCallCheck (guessing '_classCallCheck')
@babel/runtime/helpers/createClass (guessing '_createClass')
created dist\rx-util.min.js in 3.2s
Done in 5.90s.

解决方案:安装并配置下 rollup-plugin-node-resolve 和 rollup-plugin-commonjs 就好了

/*

* @Author: weidong19

* @Date: 2020-12-09 15:40:30

* @LastEditTime: 2020-12-10 17:19:52

* @LastEditors: Please set LastEditors

* @Description: In User Settings Edit

* @FilePath: /ad-micro/rollup.config.js

*/

import serve from 'rollup-plugin-serve'

import babel from 'rollup-plugin-babel';

import resolve from 'rollup-plugin-node-resolve';

import commonjs from 'rollup-plugin-commonjs';

// rollup 可以帮我们打包es6的模块化语法

export default {

input:'./src/ad-micro.js',

output:{

file:"./lib/umd/ad-micro.js",

format:'umd',

name:"adMicro",

sourcemap:true

},

plugins:[

serve({

openPage:'/index.html',

contentBase:'',

port:3000

}),

babel({

runtimeHelpers: true,

exclude: 'node_modules/**',

presets: ["@babel/preset-env"]

}),

resolve(),

commonjs()

]

}

 

 

 

 

 

.babel配置如下:@babel/plugin-transform-runtime 解决regeneratorRuntime is not defined 必备的包

{

"presets": [

"@babel/env"

],

"plugins": [

["@babel/plugin-transform-runtime", {

"regenerator": true

}]

]

}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 这个问题可能是因为您在打包后没有正确引入 echarts 库导致的。 您可以先检查一下您的项目中是否正确引入了 echarts 库,可以通过在浏览器中查看源代码或者控制台中查看是否存在 echarts 相关的代码。 如果您已经正确引入了 echarts 库,但是在打包后出现了该问题,可能是因为您的打包工具(如 webpack)没有正确处理 echarts 库的依赖关系导致的。您可以尝试在 webpack 配置中添加 externals 配置,让 webpack 在打包时将 echarts 作为外部依赖,以避免打包时将 echarts 库打入您的代码中。 例如,假设您的 echarts 库在项目中的路径为 `./echarts.js`,您可以在 webpack 配置中添加如下 externals 配置: ```js module.exports = { // ... externals: { echarts: 'echarts', }, }; ``` 这样,webpack 在打包时就不会将 echarts 库打入您的代码中,而是通过外部依赖的方式加载 echarts 库。 ### 回答2: 如果在使用 Echarts 前端库时,在开发环境中一切正常,但在打包后却出现 "echarts is not defined" 的错误,通常可能有以下几种原因和解决方法。 1. 检查依赖是否正确引入:确保在打包后的代码中,Echarts 的依赖包已正确引入。可以检查打包后生成的 HTML 文件,查看是否正确引入了 Echarts 库的 JavaScript 文件。 2. 确认 Echarts 是否被正确初始化:在打包后的代码中,检查是否正确初始化了 Echarts,即是否在使用 Echarts 实例之前,调用了 `echarts.init()` 方法进行初始化。确保初始化的代码位于使用 Echarts 实例之前,并且初始化的 DOM 元素存在于页面中。 3. 检查全局变量命名冲突:如果在打包时出现了命名冲突的情况,可能会导致 Echarts 在运行时无法正确找到。可以尝试修改 Echarts 相关的全局变量名称,以避免与其他库或自定义变量发生冲突。 4. 确认 Echarts 的引入方式:如果在打包使用了模块化加载方式(如 `import` 或 `require`),请确保正确配置了打包工具(如 webpack、rollup)的相关配置,以正确处理 Echarts 的依赖关系。 5. 检查 Echarts 版本兼容性:请确保使用的 Echarts 版本与其他相关库、插件或依赖的版本兼容。有时,不同版本的库之间可能存在兼容性问题,导致运行时出现错误。 通过以上几个方面的检查和调试,应该能解决 "echarts is not defined" 的问题。如果仍然存在问题,可以进一步提供相关的代码片段和错误信息,以便更准确地找出问题所在。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值