如何使Webpack转换ES6代码? [英] How do I get Webpack to transpile ES6 code?

问题描述

我是Webpack的新手，我只是想在这里开始一个简单的项目.我收到以下错误:

I'm pretty new to Webpack, and I'm just trying to get a simple project off the ground here. I'm getting the following error:

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;

我该怎么办?

推荐答案

您将需要设置加载程序规则，以实际处理文件并将其转换为与浏览器兼容的ES5. Webpack不会自动将您的ES2015和JSX代码转换为与Web兼容，您必须告诉它应用加载程序到某些文件，以将其翻译为与网络兼容的代码，以指示错误状态.由于您不这样做，因此会发生错误.

You're going to need to set up your loader rules to actually process and transpile your files to browser compatible ES5. Webpack does not automatically convert your ES2015 and JSX code to be web-compatible, you have to tell it to apply a loader to certain files to transpile them to web-compatible code, as the error states. Since you don't do this, the error happens.

假设您具有Webpack 2+，请在配置中使用rules属性:

Assuming you have Webpack version 2+, use the rules property in the configuration:

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中的RegEx选择以.js或.jsx结尾的文件.然后，它将babel-loader与预设es2015和react一起使用，以使用Babel并将您的JSX和ES2015代码转换为ES5代码.您还需要安装以下软件包:

This adds a rule to the Webpack config that uses the RegEx in test to select files that end in .js or .jsx. Then it uses babel-loader with the presets es2015 and react to use Babel and transpile your JSX and ES2015 code to ES5 code. You will also need to install the following packages:

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

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

您可以摆脱:

• babel-cli

有关更多信息，请参见模块的Webpack文档.

More info at the Webpack documentation for modules.

这篇关于如何使Webpack转换ES6代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！