Web ES6 上的 Gifted Messanger 端口
Gifted messanger port on web ES6
我正在尝试在 Web 上移植 Gifted Messenger React 本机端口。我陷入了问题，没有解决错误的提示。错误是
421] ./~/react-web/lib/NativeModules/NativeModules.web.js 170 bytes {0} [built]
[422] ./~/react-web/lib/StyleSheet/processColor.web.js 229 bytes {0} [built]
[423] ./GiftedMessengerContainer.js 12.2 kB {0} [built] [1 error]
[425] ./~/react-hot-loader/makeExportsHot.js 1.69 kB {0} [built]
[426] ./~/react-hot-loader/isReactClassish.js 801 bytes {0} [built]
[427] ./~/react-hot-loader/isReactElementish.js 288 bytes {0} [built]
RROR in ./~/react-native-gifted-messenger/GiftedMessenger.js
odule parse failed: D:\MyDirectory\node_modules\react-native-gifted-messenger\GiftedMessenger.js Unexpected token (398:10)
ou may need an appropriate loader to handle this file type.
yntaxError: Unexpected token (398:10)
at Parser.pp.raise (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:923:13)
at Parser.pp.unexpected (D:\MyDirectorySharedRepo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1490:8)
at Parser.pp.parseExprAtom (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:333:12)
at Parser.pp.parseExprSubscripts (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:228:19)
at Parser.pp.parseMaybeUnary (D:\MyDirectory\SharedRepo\node_modules\webpack\node_modules\acorn\dist\acorn.js:207:17)
at Parser.pp.parseExprOps (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:154:19)
at Parser.pp.parseMaybeConditional (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:136:19)
at Parser.pp.parseMaybeAssign (D:\MyDirectory\SharedRepo\node_modules\webpack\node_modules\acorn\dist\acorn.js:112:19)
at Parser.pp.parseParenAndDistinguishExpression (D:\MyDirectory\SharedRepo\node_modules\webpack\node_modules\acorn\dist\acorn.js:376:28)
at Parser.pp.parseExprAtom (D:MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:307:19)
at Parser.pp.parseExprSubscripts (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:228:19)
at Parser.pp.parseMaybeUnary (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:207:17)
at Parser.pp.parseExprOps (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:154:19)
at Parser.pp.parseMaybeConditional (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:136:19)
at Parser.pp.parseMaybeAssign (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:112:19)
at Parser.pp.parseExpression (D:\MyDirectory\SharedRepo\node_modules\webpack\node_modules\acorn\dist\acorn.js:88:19)
@ ./GiftedMessengerContainer.js 19:22-62
我在 React Native 中的实现是
var React = require('react-native');
var {
AppRegistry
} = React;
AppRegistry.registerComponent('PortedOnWeb', () => require('./GiftedMessengerContainer'));
我的 package.json 是
"dependencies": {
"react": "0.14.8",
"react-web": "0.2.4",
"react-dom": "0.14.7",
"react-native": "0.23.1",
"react-art": "0.14.0",
"socket.io-client": "1.3.7",
"react-router": "2.4.1",
"@exponent/react-native-navigator": "0.4.2",
"react-native-incall-manager": "1.1.0",
"react-native-extra-dimensions-android": "^0.17.0",
"react-native-gifted-messenger": "*"
},
"devDependencies": {
"babel-core": "6.9.0",
"babel-loader": "6.2.4",
"babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0",
"react-hot-loader": "1.3.0",
"webpack": "1.13.0",
"webpack-dev-server": "1.14.1",
"haste-resolver-webpack-plugin": "0.1.2",
"webpack-html-plugin": "0.1.1",
"css-loader": "0.23.1",
"style-loader": "0.13.1",
"file-loader": "0.8.5"
}
最后我的 web.config 是，
module.exports = {
ip: IP,
port: PORT,
devtool: 'source-map',
resolve: {
alias: {
'react-native': 'react-web',
'ReactNativeART': 'react-art',
},
extensions: ['', '.js', '.jsx'],
},
entry: isProd? [
config.paths.index
]: [
'webpack-dev-server/client?http://' + IP + ':' + PORT,
'webpack/hot/only-dev-server',
config.paths.index,
],
output: {
path: path.join(__dirname, 'output'),
filename: 'bundle.js'
},
plugins: [
new HasteResolverPlugin({
platform: 'web',
nodeModules: ['react-web']
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development'),
}
}),
isProd? new webpack.ProvidePlugin({
React: "react"
}): new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlPlugin(),
],
module: {
loaders: [
{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel-loader?presets[]=es2015,presets[]=react'],
include: [config.paths.src],
exclude: [/node_modules/]
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /.*\.(gif|png|jpe?g|svg)$/i,
loader: 'file-loader'
}],
resolve: {
extensions: ['.js', '.jsx']
}
}
};
如果有任何建议和提示也非常欢迎。
397行代码
<View style={this.styles.loadEarlierMessages}>
上面一行的代码，
编辑出现新错误
我按照给定答案的步骤我现在卡在这里
[535] ./~/react-native-gifted-messenger/Locale.js 7.19 kB {0} [built]
ERROR in ./~/react-native-button/Button.js
Module build failed: SyntaxError: D:/React_Practices/SharedRepo/node_modules/react-native-button/Button.js: U
nexpected token (21:4)
19 | var Button = React.createClass({
20 | propTypes: {
> 21 | ...TouchableOpacity.propTypes,
| ^
22 | containerStyle: View.propTypes.style,
23 | disabled: PropTypes.bool,
24 | style: Text.propTypes.style,
at Parser.pp.raise (D:\React_Practices\SharedRepo\node_modules\babylon\lib\parser\location.js:22:13)
at Parser.pp.unexpected (D:\React_Practices\SharedRepo\node_modules\babylon\lib\parser\util.js:89:8)
at Parser.pp.parseIdentifier (D:\React_Practices\SharedRepo\node_modules\babylon\lib\parser\expression.js
:1053:10)
at Parser.pp.parsePropertyName (D:\React_Practices\SharedRepo\node_modules\babylon\lib\parser\expression.
无法识别 JSX 元素，因为它位于 node_modules 文件夹下，被 babel 加载器排除，即：exclude: [/node_modules/].
问题是为什么 node_modules 下的模块没有预编译，但这超出了范围。
编辑以回答新错误：
babel 默认不支持 ... 展开运算符。
为支持扩展运算符添加阶段 2 预设：
npm install --save-dev babel-preset-stage-2
并更改配置：
loaders: ['react-hot', 'babel-loader?presets[]=es2015&presets[]=react&presets[]=stage-2'],
如果您 运行 遇到更多错误，请尝试安装 stage-0（又名 npm install --save-dev babel-preset-stage-0）
我正在尝试在 Web 上移植 Gifted Messenger React 本机端口。我陷入了问题，没有解决错误的提示。错误是
421] ./~/react-web/lib/NativeModules/NativeModules.web.js 170 bytes {0} [built]
[422] ./~/react-web/lib/StyleSheet/processColor.web.js 229 bytes {0} [built]
[423] ./GiftedMessengerContainer.js 12.2 kB {0} [built] [1 error]
[425] ./~/react-hot-loader/makeExportsHot.js 1.69 kB {0} [built]
[426] ./~/react-hot-loader/isReactClassish.js 801 bytes {0} [built]
[427] ./~/react-hot-loader/isReactElementish.js 288 bytes {0} [built]
RROR in ./~/react-native-gifted-messenger/GiftedMessenger.js
odule parse failed: D:\MyDirectory\node_modules\react-native-gifted-messenger\GiftedMessenger.js Unexpected token (398:10)
ou may need an appropriate loader to handle this file type.
yntaxError: Unexpected token (398:10)
at Parser.pp.raise (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:923:13)
at Parser.pp.unexpected (D:\MyDirectorySharedRepo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1490:8)
at Parser.pp.parseExprAtom (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:333:12)
at Parser.pp.parseExprSubscripts (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:228:19)
at Parser.pp.parseMaybeUnary (D:\MyDirectory\SharedRepo\node_modules\webpack\node_modules\acorn\dist\acorn.js:207:17)
at Parser.pp.parseExprOps (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:154:19)
at Parser.pp.parseMaybeConditional (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:136:19)
at Parser.pp.parseMaybeAssign (D:\MyDirectory\SharedRepo\node_modules\webpack\node_modules\acorn\dist\acorn.js:112:19)
at Parser.pp.parseParenAndDistinguishExpression (D:\MyDirectory\SharedRepo\node_modules\webpack\node_modules\acorn\dist\acorn.js:376:28)
at Parser.pp.parseExprAtom (D:MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:307:19)
at Parser.pp.parseExprSubscripts (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:228:19)
at Parser.pp.parseMaybeUnary (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:207:17)
at Parser.pp.parseExprOps (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:154:19)
at Parser.pp.parseMaybeConditional (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:136:19)
at Parser.pp.parseMaybeAssign (D:\MyDirectory\node_modules\webpack\node_modules\acorn\dist\acorn.js:112:19)
at Parser.pp.parseExpression (D:\MyDirectory\SharedRepo\node_modules\webpack\node_modules\acorn\dist\acorn.js:88:19)
@ ./GiftedMessengerContainer.js 19:22-62
我在 React Native 中的实现是
var React = require('react-native');
var {
AppRegistry
} = React;
AppRegistry.registerComponent('PortedOnWeb', () => require('./GiftedMessengerContainer'));
我的 package.json 是
"dependencies": {
"react": "0.14.8",
"react-web": "0.2.4",
"react-dom": "0.14.7",
"react-native": "0.23.1",
"react-art": "0.14.0",
"socket.io-client": "1.3.7",
"react-router": "2.4.1",
"@exponent/react-native-navigator": "0.4.2",
"react-native-incall-manager": "1.1.0",
"react-native-extra-dimensions-android": "^0.17.0",
"react-native-gifted-messenger": "*"
},
"devDependencies": {
"babel-core": "6.9.0",
"babel-loader": "6.2.4",
"babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0",
"react-hot-loader": "1.3.0",
"webpack": "1.13.0",
"webpack-dev-server": "1.14.1",
"haste-resolver-webpack-plugin": "0.1.2",
"webpack-html-plugin": "0.1.1",
"css-loader": "0.23.1",
"style-loader": "0.13.1",
"file-loader": "0.8.5"
}
最后我的 web.config 是，
module.exports = {
ip: IP,
port: PORT,
devtool: 'source-map',
resolve: {
alias: {
'react-native': 'react-web',
'ReactNativeART': 'react-art',
},
extensions: ['', '.js', '.jsx'],
},
entry: isProd? [
config.paths.index
]: [
'webpack-dev-server/client?http://' + IP + ':' + PORT,
'webpack/hot/only-dev-server',
config.paths.index,
],
output: {
path: path.join(__dirname, 'output'),
filename: 'bundle.js'
},
plugins: [
new HasteResolverPlugin({
platform: 'web',
nodeModules: ['react-web']
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development'),
}
}),
isProd? new webpack.ProvidePlugin({
React: "react"
}): new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlPlugin(),
],
module: {
loaders: [
{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel-loader?presets[]=es2015,presets[]=react'],
include: [config.paths.src],
exclude: [/node_modules/]
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /.*\.(gif|png|jpe?g|svg)$/i,
loader: 'file-loader'
}],
resolve: {
extensions: ['.js', '.jsx']
}
}
};
如果有任何建议和提示也非常欢迎。
397行代码
<View style={this.styles.loadEarlierMessages}>
上面一行的代码，
编辑出现新错误
我按照给定答案的步骤我现在卡在这里
[535] ./~/react-native-gifted-messenger/Locale.js 7.19 kB {0} [built]
ERROR in ./~/react-native-button/Button.js
Module build failed: SyntaxError: D:/React_Practices/SharedRepo/node_modules/react-native-button/Button.js: U
nexpected token (21:4)
19 | var Button = React.createClass({
20 | propTypes: {
> 21 | ...TouchableOpacity.propTypes,
| ^
22 | containerStyle: View.propTypes.style,
23 | disabled: PropTypes.bool,
24 | style: Text.propTypes.style,
at Parser.pp.raise (D:\React_Practices\SharedRepo\node_modules\babylon\lib\parser\location.js:22:13)
at Parser.pp.unexpected (D:\React_Practices\SharedRepo\node_modules\babylon\lib\parser\util.js:89:8)
at Parser.pp.parseIdentifier (D:\React_Practices\SharedRepo\node_modules\babylon\lib\parser\expression.js
:1053:10)
at Parser.pp.parsePropertyName (D:\React_Practices\SharedRepo\node_modules\babylon\lib\parser\expression.
无法识别 JSX 元素，因为它位于 node_modules 文件夹下，被 babel 加载器排除，即：exclude: [/node_modules/].
问题是为什么 node_modules 下的模块没有预编译，但这超出了范围。
编辑以回答新错误：
babel 默认不支持 ... 展开运算符。
为支持扩展运算符添加阶段 2 预设：
npm install --save-dev babel-preset-stage-2
并更改配置：
loaders: ['react-hot', 'babel-loader?presets[]=es2015&presets[]=react&presets[]=stage-2'],
如果您 运行 遇到更多错误，请尝试安装 stage-0（又名 npm install --save-dev babel-preset-stage-0）