如何让Webpack转译ES6代码？

Question

我还不熟悉Webpack，现在我想开展一个简单的项目。但是我遇到了以下错误：

ERROR in ./index.js
Module parse failed: /Users/jay/Documents/personal_projects/open_phil_grants_visualizer/index.js Unexpected token (6:16)
You may need an appropriate loader to handle this file type.
| import App from './app';
| 
| ReactDOM.render(<App />, document.getElementById('content'));
| 
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./index.js

以下是我的webpack.config.js文件：

module.exports = {
    entry: './index.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    devtool: 'source-map'
};

我的package.json中的依赖项:

"dependencies": {
  "d3": "^4.9.1",
  "lodash": "^4.17.4",
  "react": "^15.6.1",
  "react-d3-basic": "^1.6.11",
  "react-dom": "^15.6.1"
},
"devDependencies": {
  "babel-cli": "^6.24.1",
  "babel-preset-es2015": "^6.24.1",
  "webpack-dev-server": "^2.4.5"
}

这是我的index.js文件：

import React from 'react';
import ReactDOM from 'react-dom';

import App from './app';

ReactDOM.render(<App />, document.getElementById('content'));

以下是app.js的内容：

import React from 'react';

class App extends React.Component {
  render() {
    return(
      <h2>
        Hello from the App component!
      </h2>
    )
  }
}

export default App;

我该如何开始使用这个东西？

- Jay Quigley

Answer 1

您需要设置加载器规则来处理和转译文件，使其成为适用于浏览器的ES5代码。Webpack不会自动将您的ES2015和JSX代码转换为适用于Web的代码，您需要告诉它应用加载器来转译某些文件，以便生成适用于Web的代码，正如错误所述。如果您没有这样做，就会出现错误。

假设您使用的是Webpack版本2+，请在配置中使用rules属性：

module.exports = {
  entry: './index.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.jsx?/,
        include: 'YOUR_APP_SRC_DIR',
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015', 'react']
          }
        }
      }
    ]
  }
};

这将向Webpack配置文件添加一条规则，使用test中的正则表达式来选择以.js或.jsx结尾的文件。然后，它使用预设es2015和react的babel-loader来使用Babel并将您的JSX和ES2015代码转译为ES5代码。您还需要安装以下软件包：

• babel-core
• babel-loader
• babel-preset-react

您可以摆脱以下内容：

• babel-cli

更多信息请参见Webpack模块文档。

- Andrew Li

---

请注意，自Babel v6起，babel-preset-es2015已被弃用。现在建议使用babel-preset-env。 - the holla