如何让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;

我怎么能得到这个东西？

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配置添加一个规则,该规则使用RegEx test来选择以.js或结尾的文件.jsx.然后它使用babel-loader预设es2015并react使用Babel并将您的JSX和ES2015代码转换为ES5代码.您还需要安装以下软件包:

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

你可以摆脱:

• babel-cli

有关模块的Webpack文档的更多信息.