Reactjs &引用；意外标记“；你会选一个日期选择器吗

我正在尝试设置提供的代码

我的构建工具链由npm和browserify组成

我有下面的package.json

{
  "name": "datepicker",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "browserify -o public/bundle.js -v -d main.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babelify": "^7.0.0",
    "browserify": "^12.0.1",
    "browserify-css": "^0.14.0",
    "react": "16.5",
    "react-datepicker": "^2.0.0",
    "react-dom": "^16.5",
    "reactify": "^1.1.1"
  },
  "browserify-css": {
    "autoInject": true,
    "minify": true,
    "rootDir": ".",
    "output": "backend/public/bundle.css"
  },
  "browserify": {
    "transform": [
      "babelify",
      "browserify-css"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2"
  }
}

My main.js的组成如下：

  import React from "react";
  import ReactDOM from "react-dom"
  import DatePicker from "react-datepicker";


// CSS Modules, react-datepicker-cssmodules.css
 import 'react-datepicker/dist/react-datepicker-cssmodules.css';

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date()
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    this.setState({
      startDate: date
    });
  }

  render() {
    return (
      <DatePicker
        selected={this.state.startDate}
        onChange={this.handleChange}
      />
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('app'))

我收到了这个信息

语法错误：/home/mylogin/test\u react\u go/datepicker/main.js： 意外标记（26:6）

---

我花了一些时间来理解这个问题，但还没有找到任何解决办法。如果有更熟悉现代js工具的人能帮助我，我会很高兴。

您添加了reactify作为依赖项，但没有将其放在browserify转换列表中

---

查看一下，以便进行比较并做出更好的选择。

您添加了reactify作为依赖项，但没有将其放在browserify转换列表中

看一看，这样您就可以比较并做出更好的解决方案。

这里我们来看看我的解决方案（这很有效），如果是来自后端语言的开发人员，请浏览到这个StackOverflow问题：）您可以在下面找到一个package.json，它能够从ES6代码源在两个文件bundle.js和bundle.css中生成react项目

{
  "name": "datepicker",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "browserify -o 'public/bundle.js' -v -d main.js -p [ parcelify -o public/bundle.css ] "
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "16.5",
    "react-datepicker": "^2.0.0",
    "react-dom": "^16.5"
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "@babel/preset-env",
            "@babel/preset-react"
          ]
        }
      ]
    ]
  },
  "style": [
    "./node_modules/react-datepicker/dist/react-datepicker-cssmodules.css"
  ],
  "devDependencies": {
    "parcelify": "^2.2.0",
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babelify": "^10.0.0",
    "babel-plugin-react-css-modules": "^5.0.0",
    "browserify": "^12.0.1"
  }
}

我愿意发表评论或改进。

现在我们来讨论我的解决方案（这很有效），如果是来自后端语言的开发人员，请浏览到这个StackOverflow问题：）您可以在下面找到一个package.json，它能够从ES6源代码生成两个文件bundle.js和bundle.css中的react项目

{
  "name": "datepicker",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "browserify -o 'public/bundle.js' -v -d main.js -p [ parcelify -o public/bundle.css ] "
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "16.5",
    "react-datepicker": "^2.0.0",
    "react-dom": "^16.5"
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "@babel/preset-env",
            "@babel/preset-react"
          ]
        }
      ]
    ]
  },
  "style": [
    "./node_modules/react-datepicker/dist/react-datepicker-cssmodules.css"
  ],
  "devDependencies": {
    "parcelify": "^2.2.0",
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babelify": "^10.0.0",
    "babel-plugin-react-css-modules": "^5.0.0",
    "browserify": "^12.0.1"
  }
}

---

我愿意发表评论或改进。

对不起，Reactify依赖项不应该在这里，我改为Babelify，这样看起来更好。因此，即使我删除了依赖项中的行，它也不会改变任何东西。你的链接帮助了我，但它并没有100%解决我的问题。对不起，Reactify依赖项不应该在这里，我改主意使用Babelify，这似乎更好。所以，即使我删除了依赖项中的行，也不会改变任何事情。你的链接帮助了我，但它并没有100%解决我的问题。