Question

我决定将我现有的React App从ES5重写为ES6。以下是我的index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import ToDoList from './to-do-list.jsx';

//Put the components into HTML
ReactDOM.render(<ToDoList/>, document.getElementById('todo-wrapper'));

然而，当我尝试使用webpack构建并启动应用程序时，我收到错误：

ERROR in ./src/app/index.js
Module parse failed: /home/sam/devzone/github/simple-react-todo-app/src/app/index.js Unexpected token (6:16)
You may need an appropriate loader to handle this file type.
| 
| //Put the components into HTML
| ReactDOM.render(<ToDoList/>, document.getElementById('todo-wrapper'));

我选择babel-preset-env代替babel-preset-es2015，但我非常怀疑这是原因。以下是我package.json和webpack.config.js的快照。

的package.json

"main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npm run build",
    "build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234"
  },
  ...
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.7",
    "eslint": "^4.7.2",
    "eslint-plugin-react": "^7.4.0",
    "style-loader": "^0.18.2",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {

    entry: path.resolve(__dirname, 'src') + '/app/index.js',
    output: {
        path: path.resolve(__dirname, 'dist') + '/app',
        filename: 'bundle.js',
        publicPath: '/app/'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                include: path.resolve(__dirname, 'src'),
                loader: 'babel-loader',
                query: {
                        "presets": [
                            ["env", {
                                "loose": true,
                                "modules": false,
                                "useBuiltIns": true,
                                "debug": true,
                                "include": ["transform-es2015-classes"]
                            }],
                            "react"
                        ],
                        "plugins": [
                            "babel-plugin-transform-es2015-parameters",
                            "babel-plugin-transform-es2015-destructuring"
                        ]
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ],
        rules: [
            {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
};

因为很明显我自己做了一些试验和错误，但我现在似乎完全迷失了。

我的回购here内可以看到app文件夹结构和其他相关文件。

任何指针都会受到赞赏。

Answer 1

您的网络包的配置错误（来自Webpack 1的旧配置）

您应将其更改为：

const path = require('path');
const webpack = require('webpack');

module.exports = {

    entry: path.resolve(__dirname, 'src') + '/app/index.js',
    output: {
        path: path.resolve(__dirname, 'dist') + '/app',
        filename: 'bundle.js',
        publicPath: '/app/'
    },
    module: {
        rules: [
             {
                test: /\.jsx?$/,
                include: path.resolve(__dirname, 'src'),
                loader: 'babel-loader',
                options: {
                        "presets": [
                            ["env", {
                                "loose": true,
                                "modules": false,
                                "useBuiltIns": true,
                                "debug": true,
                                "include": ["transform-es2015-classes"]
                            }],
                            "react"
                        ],
                        "plugins": [
                            "babel-plugin-transform-es2015-parameters",
                            "babel-plugin-transform-es2015-destructuring"
                        ]
                }
            },
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
};

Answer 2

只需更改

test: /\.jsx?$/,

要

test: /.(js|jsx)?$/,

无法使用webpack和babel-preset-env

2 个答案: