SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in

1,036 阅读1分钟

网上都说是webpack-dev-server版本高于2.7.1引起的,经查验不是这样的。

”SyntaxError: Unexpected keyword 'const'. Const declarations are not supporte“ 错误是因为浏览器不支持es6语法,查看打包后的文件,部分文件有const、let等es6语法,注释view-design组件后再打包就没有es6语法了,所以出错的原因是view-design组件打包时ES6语法没有编译成ES5语法。

解决iview 按需引入babel转换问题

1. babel.config.js 配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ['import', {
      libraryName: 'view-design',
      libraryDirectory: "src/components"
    }, 'view-design']
  ]
}

2. vue.config.js 配置

module.exports = {
  chainWebpack: (config) => {
    //解决iview 按需引入babel转换问题
    config.module
      .rule("view-design")  // rule: 4.0.0以上的iview版本用view-design
      // .rule("view-design")  //  rule: 4.0.0以下的用iview
      .test(/view-design.src.*?js$/)
      .use("babel")
      .loader("babel-loader")
      .end();
  }
};