"Unexpected token" 将尝试 react-datepicker
"Unexpected token" will trying react-datepicker
我正在尝试设置提供的代码 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:
Unexpected token (26:6)
我花了一些时间来理解这个问题,但还没有找到任何解决方案。如果有人更习惯现代 js 工具可以帮助我,我会很高兴。
您将 reactify 添加为依赖项,但没有将其放入 browserify 转换列表。
看一看 this setup 以便您进行比较并做出更好的选择。
这是我的解决方案(有效),如果开发人员来自后端语言,请浏览此 Whosebug 问题 :) 您可以在下面找到能够生成反应项目的 package.json在来自 ES6 代码源的两个文件 bundle.js & bundle.css 中。
{
"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"
}
}
我愿意发表评论或改进。
我正在尝试设置提供的代码 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: Unexpected token (26:6)
我花了一些时间来理解这个问题,但还没有找到任何解决方案。如果有人更习惯现代 js 工具可以帮助我,我会很高兴。
您将 reactify 添加为依赖项,但没有将其放入 browserify 转换列表。
看一看 this setup 以便您进行比较并做出更好的选择。
这是我的解决方案(有效),如果开发人员来自后端语言,请浏览此 Whosebug 问题 :) 您可以在下面找到能够生成反应项目的 package.json在来自 ES6 代码源的两个文件 bundle.js & bundle.css 中。
{
"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"
}
}
我愿意发表评论或改进。