unexpected token export

unexpected token export 是一个常见的JavaScript错误，通常出现在浏览器环境中尝试使用ES6模块语法（如export和import）时。这个错误的原因是浏览器默认不支持ES6模块语法，或者你的代码运行环境没有正确配置以支持这种语法。

基础概念

• ES6模块：ES6引入了模块的概念，允许开发者将代码分割成多个文件，并通过export导出函数、对象或原始值，通过import导入这些值。
• CommonJS：Node.js使用的模块系统，使用require和module.exports。

相关优势

• 模块化：使代码更易于组织和维护。
• 可重用性：模块可以在不同的项目中重复使用。
• 静态分析：编译器可以在编译时检查模块依赖关系，有助于优化和错误检测。

类型

• 默认导出：每个模块只能有一个默认导出。
• 默认导出：每个模块只能有一个默认导出。
• 命名导出：一个模块可以有多个命名导出。
• 命名导出：一个模块可以有多个命名导出。

应用场景

• 前端开发：使用现代浏览器支持的ES6模块。
• Node.js：使用CommonJS模块系统，但可以通过配置支持ES6模块。

解决方法

1. 使用Babel转译

Babel是一个JavaScript编译器，可以将ES6代码转换为向后兼容的JavaScript版本。

npm install --save-dev @babel/core @babel/cli @babel/preset-env

创建.babelrc文件：

{
  "presets": ["@babel/preset-env"]
}

然后运行：

npx babel src --out-dir dist

2. 使用Webpack打包

Webpack是一个模块打包工具，可以处理ES6模块并生成浏览器兼容的代码。

npm install --save-dev webpack webpack-cli babel-loader

配置webpack.config.js：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

3. 在HTML中使用type="module"

如果你直接在浏览器中使用ES6模块，可以在<script>标签中添加type="module"属性。

<script type="module" src="path/to/your/module.js"></script>

示例代码

假设你有一个模块math.js：

// math.js
export function add(x, y) {
  return x + y;
}

你可以这样导入和使用它：

// index.js
import { add } from './math.js';

console.log(add(2, 3)); // 输出: 5

通过上述方法，你可以解决unexpected token export错误，并正确地在项目中使用ES6模块语法。