Question

我正在尝试设置on the page of the react-datepicker提供的代码。

我的构建工具链由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"
  }
}

我的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'))

然后我跑

npm run start

我收到了此消息

SyntaxError：/home/mylogin/test_react_go/datepicker/main.js：意外令牌（26：6）

我花了一些时间来了解问题，但没有找到任何解决方案。如果更熟悉现代js工具的人能为我提供帮助，我将感到非常高兴。

Answer 1

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

看看this setup，以便您可以比较并做得更好。

Answer 2

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

tf.placeholder_with_default

我愿意评论或改进。

“意外令牌”将尝试react-datepicker

2 个答案: