Webpack - 未捕獲的語法錯誤：意外的令牌導入

Question

運行應用程序時出現意外的令牌導入錯誤。 請看一下我的網絡包配置設置 -

-- webpack.config.js --

var path = require("path");

module.exports = {
    entry: ['./main.js'],
    output: {
      path: path.join(__dirname, 'build'),
      filename: "bundle.js",
      publicPath: '/build'
    },
    resolve: {
      modules: [
        path.resolve('./src'),
        path.resolve('./node_modules')
      ],
      extensions: ['.js','.jsx']
    },
    module: {
      loaders: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: {
            presets: ['es2015', 'react']
          }
        },
      ]
    },
    devServer: {
      inline: true,
      port: 3000
   }

  };

---

.babelrc

{
  "presets": ["es2015"],
  "plugins": [
    ["transform-object-rest-spread"],
    ["transform-runtime", {
      "polyfill": false,
      "regenerator": true
    }],
  ]
}

---

---package.json---

{
  "name": "pagination",
  "version": "1.0.0",
  "description": "about table pagination",
  "main": "main.js",
  "scripts": {
    "start": "webpack-dev-server --hot",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "material-ui": "^0.16.7",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0"
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-object-rest-spread": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-0": "^6.22.0",
    "install": "^0.8.7",
    "npm": "^4.2.0"
  }
}

---

正如你在代碼中看到的，我已經設置了 webpack.So 盡管服務器啟動成功，但它給出了一個錯誤

'未捕獲的語法錯誤：意外的令牌導入'。

Answer 1

因此，我建議您從.babelrc文件中刪除預設，因為您已經將它們包含在webpack ，這可能會導致問題，因為您沒有在babelrc包含react preset 。

.babelrc

{
    "plugins": [
    ["transform-object-rest-spread"],
    ["transform-runtime", {
      "polyfill": false,
      "regenerator": true
    }],
  ]
}

其次確保你有適合所有導入的加載器，如 css、svg 等

module: {
   loaders: [
    { test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react']
      }
    },
    { test: /\.css$/, loader: "style!css" },
    { test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=8192' },
    { test: /\.(otf|eot|ttf)$/, loader: "file?prefix=font/" },
    { test: /\.svg$/, loader: "file" }
  ],
}

您可以根據您的要求排除上述一些加載器，並確保在使用前安裝loaders器