Question

我尝试使用webpack和babel构建我的reactjs应用程序。

我从反应启动器启动了这个应用程序，它随react-scripts build一起提供。然而，它是一个黑盒子，并没有真正提供我需要的所有功能，特别是当一个模块不喜欢UglifyJS时。

我的webpack.config.js看起来非常简单：

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

var BUILD_DIR = path.resolve(__dirname, 'build_webpack');
var APP_DIR = path.resolve(__dirname, 'src');

module.exports = {
  entry: APP_DIR + '/index.js',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/, 
        loader: 'babel'
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      }
    ]
  }
}

我在package.js：

中有此配置

"scripts": {
        "start": "react-scripts start",
        "reactbuild": "react-scripts build",
        "webpackbuild": "webpack --watch",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
      }

我的.babelrc文件也只有这个：

{
  "presets" : ["es2015", "es2016", "react"]
}

但是，react-scripts build中的代码在此处失败，错误输出显示：

./src/Pages/SearchTool/SearchResult.js中的错误模块构建失败：SyntaxError：意外的令牌（100：13）

（错误是指数据输入参数）

renderChip = (data) => {
         return (
           <Chip
             key={data.key}

我真的没有看到这个表达式有什么特别之处。我不认为这是非常常用的，但应该是合法的。另外，我切换到webpack的一个原因是之前的反应构建不喜欢es6，但我的模块中有一个很重要的是用es6编写的。

我想知道我的配置或其他地方缺少什么。谢谢你的帮助！

修改

我的package.js：

{
  "name": "myCoolApps",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "css-loader": "^0.26.1",
    "react-scripts": "0.7.0",
    "webpack": "^1.13.3"
  },
  "dependencies": {
    "ace": "git+https://github.com/ajaxorg/ace.git#master",
    "antd": "^2.7.2",
    "axios": "^0.15.3",
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-preset-env": "^1.4.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2016": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "card": "^2.2.1",
    "card-react": "^1.2.6",
    "chat-template": "0.0.22",
    "codemirror": "^5.25.0",
    "credit-card-type": "^5.0.1",
    "css-loader": "^0.26.1",
    "d3": "^4.7.4",
    "firechat": "^3.0.1",
    "firepad": "^1.4.0",
    "flux": "^3.1.0",
    "gulp": "^3.9.1",
    "gulp-sass": "^3.1.0",
    "history": "^1.17.0",
    "little-loader": "^0.2.0",
    "lodash": "^4.17.4",
    "material-ui": "^0.16.6",
    "moment": "^2.17.1",
    "node-sass": "^4.5.0",
    "quill": "^1.2.3",
    "rc-calendar": "^7.6.5",
    "react": "^15.5.4",
    "react-autosuggest": "^7.0.1",
    "react-cookie": "^1.0.4",
    "react-credit-card": "^0.20.0",
    "react-dom": "^15.5.4",
    "react-dropzone": "^3.8.0",
    "react-event-timeline": "^1.2.2",
    "react-infinite": "^0.10.0",
    "react-infinite-scroller": "^1.0.7",
    "react-list": "^0.8.3",
    "react-notification-system": "^0.2.12",
    "react-router": "^3.0.0",
    "react-tap-event-plugin": "^2.0.1",
    "seedrandom": "^2.4.2",
    "simplewebrtc": "^2.2.2",
    "style-loader": "^0.13.1",
    "superagent": "^3.3.1",
    "webpack": "^1.15.0",
    "y-array": "^10.0.6",
    "y-indexeddb": "^8.1.9",
    "y-leveldb": "0.0.1",
    "y-map": "^10.0.5",
    "y-memory": "^8.0.8",
    "y-richtext": "^9.0.8",
    "y-text": "^9.3.2",
    "y-webrtc": "^8.0.7",
    "y-websockets-client": "^8.0.15",
    "yjs": "^12.1.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "reactbuild": "react-scripts build",
    "webpackbuild": "webpack",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

更新

我尝试了env预设，现在我的webpack.config.js看起来像这样：

{
  "presets":
  [
    "react",
    [
      "env",
      {
        "targets": {
          "uglify": false,
          "node": "current",
          "debug": true,
        },
      }
    ],
  ],
}

然而，它仍然抱怨这个表达：

ERROR in ./src/Pages/SearchTool/SearchResult.js
Module build failed: SyntaxError: Unexpected token (100:13)

   98 |   }
   99 | 
> 100 |   renderChip = (data) => {
      |              ^
  101 |     return (
  102 |       <Chip
  103 |         key={data.key}

 @ ./src/Pages/Connections/Connections.js 43:20-57

该函数最初在程序中看起来像这样（注意：它在一个类中）：

  renderChip = (data) => {
    return (
      <Chip
        key={data.key}
        onRequestDelete={this.handleRequestDelete}
        style={{
          borderRadius: '6px',
          margin: '0 4px',
          height: 35
        }}
      >
        {data.label}
      </Chip>
    );
  }

我也试过手动包含插件

这个功能在我班上的位置如下：

class Name extends Component {
    constructor(props) {...}

    renderChip = (data) => {
        return (
          <Chip
            key={data.key}
            onRequestDelete={this.handleRequestDelete}
            style={{
              borderRadius: '6px',
              margin: '0 4px',
              height: 35
            }}
          >
            {data.label}
          </Chip>
        );
      }

    render() {...}
}

我手动包含transform-es2015-function-name和transform-es2015-arrow-functions，但它们无效。我需要手动包含一些其他插件吗？还是由其他原因造成的？

解决

解决方案是将函数experssion更改为：

renderChip() {
    ...
}

Answer 1

请添加babel-preset-env包。

您的.babelrc应该是这样的:( ["env" ...]部分在这里很重要）

{
  "presets": [
    ["env", {
      "targets": {
        "uglify": true,
        "node": "current"
      }
    }]
  ]
}

阅读我上面提到的文档。 UglifyJS不支持ES6。建议改为使用babel-minify。

UglifyJS目前不支持任何ES6语法，所以如果你是   使用Uglify缩小代码，定位以后的浏览器可能会导致   Uglify抛出语法错误。

要防止出现这些错误，请指定将启用的uglify选项   所有插件，因此，将您的代码完全编译到ES5。然而，   useBuiltIns选项仍然可以像以前一样工作，并且只包括   您的目标需要的polyfills。

<强>更新

尝试安装/重新安装这些软件包。你可能不需要所有这些，但是你可能会在以后找到它们。

npm install --save-dev babel-core babel-loader babel-polyfill babel-preset-env babel-register babel-plugin-syntax-dynamic-import babel-plugin-transform-object-rest-spread babel-plugin-transform-regenerator

写

renderChip(data) {

而不是

renderChip = (data) => {

Answer 2

您不能直接在类体中使用赋值运算符声明类方法，而是可以执行以下操作。

renderChip(data) {
    return (
      <Chip
        key={data.key}
        onRequestDelete={this.handleRequestDelete}
        style={{
          borderRadius: '6px',
          margin: '0 4px',
          height: 35
        }}
      >
        {data.label}
      </Chip>
    );
  }

您可以阅读有关ES6课程here的内容。

希望这有帮助！

为什么webpack不喜欢这个表达式

2 个答案: