最新消息: 电脑我帮您提供丰富的电脑知识,编程学习,软件下载,win7系统下载。

模块构建失败了

IT培训 admin 4浏览 0评论

模块构建失败了

我通过express-generator(表达myNewApp)创建了一个MERN(MongoDB,ExpressJS,React,Node)项目。

在反应组件内部,我有这段ES6代码

onChange = (event, { newValue }) => { // FYI this is line 53
        this.setState({
            value: newValue
   });
};

当我运行npm start时,我收到此错误:模块构建失败:SyntaxError:意外的令牌(53:13)。

这是我的package.json:{

"name": "myNewApp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "webpack --progress --colors --watch -d",
    "build": "webpack --progress --colors -p"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "babel-cli": "^6.11.4",
    "babel-core": "^6.13.2",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "body-parser": "~1.16.0",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.0",
    "ejs": "^2.5.6",
    "express": "~4.14.1",
    "jade": "~1.11.0",
    "mongojs": "^2.4.0",
    "morgan": "~1.7.0",
    "react": "^15.4.2",
    "react-autosuggest": "^9.3.2",
    "react-bootstrap": "^0.30.7",
    "react-dom": "^15.4.2",
    "react-router": "^2.6.1",
    "serve-favicon": "~2.3.2"
  },
  "devDependencies": {
    "babel-loader": "^6.2.10",
    "http-server": "^0.9.0",
    "webpack": "^1.13.3"
  }

}

我的webpack配置文件如下所示。

var webpack = require('webpack');

var definePlugin = new webpack.DefinePlugin({
    __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
    __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
});
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
    cache: true,
    entry: {      main:  './views/index.jsx'   },
    output: {    path: 'public/build',        filename: '[name].js'    },
    module: {
        loaders: [
            {test: /\.jsx?$/, loader: 'babel', exclude: /(node_modules|bower_components)/, query: { presets: ['react', 'es2015'] }},
        ]
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    plugins: [
        definePlugin,
        commonsPlugin
    ]
};
回答如下:
  1. npm i --save-dev babel-preset-stage-0
  2. 更改webpack.config.js:query: { presets: ['react', 'es2015', 'stage-0']

模块构建失败了

我通过express-generator(表达myNewApp)创建了一个MERN(MongoDB,ExpressJS,React,Node)项目。

在反应组件内部,我有这段ES6代码

onChange = (event, { newValue }) => { // FYI this is line 53
        this.setState({
            value: newValue
   });
};

当我运行npm start时,我收到此错误:模块构建失败:SyntaxError:意外的令牌(53:13)。

这是我的package.json:{

"name": "myNewApp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "webpack --progress --colors --watch -d",
    "build": "webpack --progress --colors -p"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "babel-cli": "^6.11.4",
    "babel-core": "^6.13.2",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "body-parser": "~1.16.0",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.0",
    "ejs": "^2.5.6",
    "express": "~4.14.1",
    "jade": "~1.11.0",
    "mongojs": "^2.4.0",
    "morgan": "~1.7.0",
    "react": "^15.4.2",
    "react-autosuggest": "^9.3.2",
    "react-bootstrap": "^0.30.7",
    "react-dom": "^15.4.2",
    "react-router": "^2.6.1",
    "serve-favicon": "~2.3.2"
  },
  "devDependencies": {
    "babel-loader": "^6.2.10",
    "http-server": "^0.9.0",
    "webpack": "^1.13.3"
  }

}

我的webpack配置文件如下所示。

var webpack = require('webpack');

var definePlugin = new webpack.DefinePlugin({
    __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
    __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
});
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
    cache: true,
    entry: {      main:  './views/index.jsx'   },
    output: {    path: 'public/build',        filename: '[name].js'    },
    module: {
        loaders: [
            {test: /\.jsx?$/, loader: 'babel', exclude: /(node_modules|bower_components)/, query: { presets: ['react', 'es2015'] }},
        ]
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    plugins: [
        definePlugin,
        commonsPlugin
    ]
};
回答如下:
  1. npm i --save-dev babel-preset-stage-0
  2. 更改webpack.config.js:query: { presets: ['react', 'es2015', 'stage-0']

与本文相关的文章

发布评论

评论列表 (0)

  1. 暂无评论