Question

在尝试将babel-polyfill与webpack一起使用时，我一直遇到以下错误。如何在没有像babel-loader这样的装载机的情况下使用它？有人提到它会模仿es2015环境。

ERROR in ./components/App.component.jsx
Module parse failed: /home/krishna/AndroidStudioProjects/jancan/web/components/App.component.jsx Unexpected token (6:1)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (6:1)
    at Parser.pp$4.raise (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseParenAndDistinguishExpression (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1861:32)
    at Parser.pp$3.parseExprAtom (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1796:19)
    at Parser.pp$3.parseExprSubscripts (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseFunctionBody (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:2098:24)
    at Parser.pp$3.parseArrowExpression (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:2087:10)
    at Parser.pp$3.parseParenArrowList (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1902:17)
    at Parser.pp$3.parseParenAndDistinguishExpression (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1870:21)
    at Parser.pp$3.parseExprAtom (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1796:19)
    at Parser.pp$3.parseExprSubscripts (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$1.parseVar (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1034:28)
    at Parser.pp$1.parseVarStatement (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:917:10)
    at Parser.pp$1.parseStatement (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:706:19)
    at Parser.pp$1.parseTopLevel (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
 @ multi main

修改

我的webpack配置

module.exports = {
    entry: ['babel-polyfill', './components/App.component.jsx'],
    output: {
        path: 'dist/',
        filename: "bundle.js"
    },
    loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel', // 'babel-loader' is also a valid name to reference
      query: {
        presets: ['es2015','react']
      }
    }
  ]
};

我添加了babel-loader但仍然得到同样的错误

Answer 1

这就是我在Webpack配置中使用babel-polyfill的方法。

  entry: {
    app: ['babel-polyfill', 'main']
  }

使用babel-polyfill和webpack

1 个答案: