如何解决 Webpack 在打包时遇到的 Error:Export Unexpected Token 问题-JavaScript中文网-JavaScript教程资源分享门户

如何解决 Webpack 在打包时遇到的 Error: Export Unexpected Token 问题

前言

随着前端技术的不断变革，Webpack 已经成为了前端开发中必不可少的工具，它能够为工程化、模块化的开发提供强有力的支持。但是在使用 Webpack 进行打包时，有些开发者会经常遇到一个奇怪的错误：Error: Export Unexpected Token，本文将为大家详细介绍如何解决这个问题。

问题背景

在使用 Webpack 进行项目打包时，有时候会遇到这样的错误：Error: Export Unexpected Token。

具体的错误信息如下所示：

// www.javascriptcn.com code example
ERROR in ./src/index.js
Module build failed: SyntaxError: /Users/user/code/path/src/index.js: Unexpected token (5:1)

3 | import Vue from 'vue';
4 | import App from './App.vue';
5 | export default new Vue({
  | ^
6 |   el: '#app',
7 |   render: h => h(App)
8 | });

问题分析

这个错误提示是因为在代码中使用了 ES6 的语法，但是还未设置好打包器对于这种语法的支持。在进行打包时，Webpack 默认使用的是用作启动脚本的文件的 ES5 脚本来打包应用程序，而 ES6 语法中有些特殊的定义方式，比如引入模块的语法，这些导致了打包时出现了异常。

解决方案

解决这个问题的方法有很多，下面我们将为大家介绍其中几个比较常见的解决方案。

方案一：使用 babel-loader 来处理代码

babel-loader 是一个让 Webpack 识别 ES6 以及其他新一代 JavaScript 语法的 loader，它非常常用，而且使用它也可以很方便的解决我们遇到的问题。

下面是一个对 .js 文件使用 babel-loader 的例子：

// www.javascriptcn.com code example
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

这里需要注意的是，使用 babel-loader 需要先安装 babel-core 和 babel-loader 以及你所需要的转换器。

方案二：使用 babel-preset-env 处理代码

babel-preset-env 是一个用于使用最新 JavaScript 语法编写代码的工具，它可以自动适配目标环境，并自动编译 JavaScript 代码。使用这个工具也可以很好地解决我们遇到的问题。

下面是一个使用 babel-preset-env 的例子：

// www.javascriptcn.com code example
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "last 2 versions",
            "ie >= 10"
          ]
        }
      }
    ]
  ]
}

这里的 targets 是目标环境，也就是指在什么样的环境下运行。在上述例子中，我们将编译后的代码支持了最近两个浏览器版本以及 IE10 以上的版本。

方案三：手动打包一个包含 polyfill 的 vendor 包

polyfill 是一个用于设置 Webpack 的表现的模块，可以在代码中以任何方式门让 Webpack 去处理这个模块，从而使用这个模块实现 Webpack 所需要完成特定功能。使用 polyfill 处理代码也可以解决我们遇到的问题。

下面是一个使用 polyfill 的例子：

import 'babel-polyfill';

这里的 import 语句告诉 Webpack 载入了一个有参数的函数 babel-polyfill。这个函数将开发者所需要的所有新的代码特性添加到代码中。

最后

以上就是本文对于如何解决 Webpack 在打包时遇到的 Export Unexpected Token 问题的详细介绍。如果你也遇到了这样的问题，那就按照上述的方式进行解决吧。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d693d2a941bf7134c5dc50

如何解决 Webpack 在打包时遇到的 Error:Export Unexpected Token 问题

接着读