- 首先是直接用原来的话报错ReferenceError: regeneratorRuntime is not defined"
- 查到说要用babel-plugin-transform-runtime 已经修改.babelrc文件 "plugins":["transform-runtime"]
- 然后接着报错require 不能用
- 再查说是
Babel 所做的只是帮你把‘ES6 模块化语法’转化为‘CommonJS 模块化语法’,其中的require exports 等是 CommonJS 在具体实现中所提供的变量。
任何实现 CommonJS 规范的环境(如 node 环境)可以直接运行这样的代码,而浏览器环境并没有实现对 CommonJS 规范的支持,所以我们需要使用打包工具(bundler)来进行打包,说的直观一点就是把所有的模块组装起来,形成一个常规的 js 文件。
常用的打包工具包括 browserify webpack rollup 等。
5.想起来用parcel也出现这个问题,加上transform就解决了,应该是它自带
- .babelrc文件的配置也可以写在js文件里面.pipe(babel({"presets": ["env"]"}))
- 看了半天babel的官网,用的网页翻译,有的网页把代码都翻译了(这个网站没有,应该因为用了code的模式),各种搞笑,bug翻译的是虫虫,英语呀英语,尽管现在翻译是越来越方便了,但一眼能看懂的话还是能省不少事
官网里有就它的两种配置,之前在不同的博客上看到不同的配置搞的头晕,
看来还是要官网简洁靠谱
Without options:
{
"plugins": ["transform-runtime"]
}
With options:
{
"plugins": [
["transform-runtime", {
"helpers": false,
"polyfill": false,
"regenerator": true,
"moduleName": "babel-runtime"
}]
]
}
- 还找到个Webpack-stream的插件,在gulp中使用
用 gulp 可以看看 webpack-stream,或者直接用 webpack 或 Browserify 。
gulp使用'transform-runtime'时出现'require is not defined'问题
- 人家babel官方的说明gulp-babel
- 再去看了下现代前端那本书对于各模块化的规范p233
1.AMD 运行在浏览器 以requireJS为代表
2.CMD 浏览器 Seajs提出的
3.CommonJs Node端 使用require进行模块引入,使用modules.exports来导出
4.import/export es6定义的 唯一遵循JavaScript语言标准的
- 难道说就不能只用gulp简单的处理async了么
参考