zoukankan      html  css  js  c++  java
  • webpack4.0 babel配置遇到的问题

    babel配置
    babel版本升级到8.x之后发现出现了很多问题.
    首先需要安装

    "@babel/core": "^7.1.2",
    "@babel/plugin-transform-object-assign": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/runtime": "^7.1.2",
    "babel-loader": "^8.0.4"

    因为babel8.x插件依赖这些插件.
    因为我的项目需要兼容IE8 所以我的babel-loader 配置如下

    {
          test: /.js$/,
          include: dirVars.srcRootDir,
          loader: 'babel-loader',
          options: {
            presets: [
              [
                "@babel/preset-env",
                {
                  "targets": {
                    "browsers": ["ie >= 8"]
                  },
                  //"useBuiltIns": 'usage',
                  "modules": "commonjs"
                }
              ]
            ],
            cacheDirectory: true,
            plugins: [
              '@babel/plugin-transform-runtime', "@babel/plugin-transform-object-assign"
            ]
          }
        }

    打包之后发现我的项目出错了,因为项目里有个js用了Object.assign()方法 所有报这个方法的错误.
    以前webpack3 配置babel plugins: ['transform-runtime'],当时babel版本6.x直接就会转义这个方法.所以不会报错.
    现在babel8.x 配置babel plugins: ['@babel/plugin-transform-object-assign']无效报错.
    后来google后查找,发现了2种好的解决办法
    第一种办法先安装"@babel/polyfill": "^7.0.0",
    babel-loader 加配置"useBuiltIns": 'usage'
    "useBuiltIns": 'usage' 的意思是对应的环境自动替换为所需的 polyfill。
    详情看这篇文章https://juejin.im/entry/596309365188252ec3400aaf
    这篇文章会介绍为什么不直接引入babel/polyfill.
    第二种办法用@babel/plugin-transform-object-assign插件.
    配置完成后,运行demo并且报错
    Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    网上解决方法如下:
    点开错误的文件,标注错误的地方是这样的一段代码:
    import {normalTime} from './timeFormat';
    module.exports={
      normalTime
    };
    就是module.exports;
    百度查不到,google一查果然有。
    原因是:The code above is ok. You can mix require and export. You can‘t mix import and module.exports.
    翻译过来就是说,代码没毛病,在webpack打包的时候,可以在js文件中混用require和export。但是不能混用import 以及module.exports。
    因为webpack 中不允许混用import和module.exports,
    解决办法就是统一改成ES6的方式编写即可.
    我的解决办法:
    babel-loder配置加一行代码"modules": "commonjs"
    这是因为这个配置环境下module 类型需要统一成一种,加这行代码后就搞定,还是可以随意用,并转义成功.

  • 相关阅读:
    [DP] Rod-cutting problem
    Dynamic Programming (DP) 问题总结
    [CC150] 八皇后问题
    [cc150] 硬币问题
    [cc150] 括号问题
    [CC150] Get all permutations of a string
    让Eclipse使用新版本的JRE
    Java中的数组问题
    慎用递归!
    cocos2d-x 添加背景音乐和音效-SimpleAudioEngine
  • 原文地址:https://www.cnblogs.com/chengfeng6/p/9813024.html
Copyright © 2011-2022 走看看