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 类型需要统一成一种,加这行代码后就搞定,还是可以随意用,并转义成功.

  • 相关阅读:
    c#RSA的SHA1加密与AES加密、解密
    c#后台代码请求访问api接口
    Hbuilder给手机发送短信与拨打电话
    Hbuilder获取手机当前地理位置的天气
    plus.webview.create( url, id, styles, extras )参数及说明
    九九乘法表+冒泡排序(校园回忆录)
    c#数据处理总结(分组、交并差与递归)
    Hbuilder MUI 下拉选择与时间选择器
    JAVA常用开源工具与项目
    mysql 中常用功能
  • 原文地址:https://www.cnblogs.com/chengfeng6/p/9813024.html
Copyright © 2011-2022 走看看