@babel/plugin-transform-runtime 到底是什么?

  1. // 此文件相当于babel-loader的options选项
  2. {
  3. "presets": [
  4. [
  5. "@babel/preset-env",
  6. {
  7. // useBuiltIns配置polyfill和targets使用,
  8. // false 此时不对 polyfill 做操作,无视配置的浏览器兼容,引入所有的 polyfill
  9. // usage会根据配置的浏览器兼容,以及你代码中用到的 API 来进行 polyfill,实现了按需添加
  10. // entry 根据配置的浏览器兼容, 引入浏览器不兼容的 polyfill
  11. "useBuiltIns": "usage",
  12. "targets": { // 环境chrome67以上支持ES6
  13. "chrome": "67"
  14. }
  15. }
  16. ]
  17. ], // 语法的变换 // 8.x以下配置babel-preset-env
  18. "plugins": [
  19. [
  20. "@babel/plugin-transform-runtime",
  21. {
  22. "absoluteRuntime": false,
  23. // 相较于preset-env改变全局变量,corejs会引入单独的模块,生成新的变量。例如引入_Promise,替换ES6的Promise
  24. // corejs2只处理包装类型的方法,如Array.inclues;corejs3会处理实例的方法,如[].includes
  25. "corejs": 2, // 默认false,如果是2,需安装@babel/runtime-corejs2
  26. "helpers": true,
  27. "regenerator": true,
  28. "useESModules": false
  29. }
  30. ],
  31. // 模块异步引入 import(xxx).then({ default: _ } => {});
  32. // 动态import插件,但不支持魔法注释
  33. // [
  34. // "dynamic-import-webpack" // babel-plugin-dynamic-import-webpack
  35. // ],
  36. // 这是官方动态import插件,支持魔法注释
  37. [
  38. "@babel/plugin-syntax-dynamic-import"
  39. ]
  40. ]
  41. }
  1. // .babelrc 编辑器
  2. // 此文件相当于babel-loader的options选项
  3. {
  4. "presets": [
  5. [
  6. "@babel/preset-env",
  7. {
  8. "useBuiltIns": "usage",
  9. "corejs": 2 // 不确定plugin-transform-runtime用了corejs2/3后这里还需不需要corejs
  10. }
  11. ]
  12. ],
  13. "plugins": [
  14. [
  15. "@babel/plugin-transform-runtime",
  16. {
  17. "corejs": 2
  18. }
  19. ]
  20. ],
  21. // 严格区分 commonJS 文件和 ES6 文件
  22. "sourceType": "unambiguous"
  23. }

“sourceType”: “unambiguous”解决Cannot assign to read only property ‘exports’ of object ‘#‘问题

corejs

3.0.0-beta.3 - Can’t resolve ‘core-js/es7/reflect’