任何人都可以建议为什么会出现此错误吗？谢谢!
电子(Chromium)开发者控制台出现此错误:“Uncaught SyntaxError:意外的保留字”并引用appentrypoint.js
在控制台中点击appentrypoint.js显示它看起来像这样:
(function (exports, require, module, __filename, __dirname, process, global) { import React from 'react';
window.React = React;
export default function appEntryPoint(mountNode) {
React.render(<img src='http://tinyurl.com/lkevsb9' />, mountNode);
}
});
appentrypoint.js 的实际源文件如下所示:
import React from 'react';
window.React = React;
export default function appEntryPoint(mountNode) {
React.render(<img src='http://tinyurl.com/lkevsb9' />, mountNode);
}
HTML 文件如下所示:
<!DOCTYPE html>
<html>
<body >
<div id="root" class='section'>
</div>
<script src="http://localhost:3000/dist/bundle.js"></script>
<script type="text/javascript">
(function () {
var mountNode = document.getElementById('root');
var appEntryPoint = require('./appentrypoint.js');
appEntryPoint(mountNode);
})();
</script>
</body>
</html>
webpack.config.base 看起来像这样:
var path = require('path');
module.exports = {
module: {
loaders: [{
test: /\.jsx?$/,
loaders: ['babel-loader'],
exclude: /node_modules/
}]
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
libraryTarget: 'commonjs2'
},
resolve: {
extensions: ['', '.js', '.jsx'],
packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main']
},
plugins: [
],
externals: [
// put your node 3rd party libraries which can't be built with webpack here (mysql, mongodb, and so on..)
]
};
和 webpack.config.development 看起来像这样:
/* eslint strict: 0 */
'use strict';
var webpack = require('webpack');
var webpackTargetElectronRenderer = require('webpack-target-electron-renderer');
var baseConfig = require('./webpack.config.base');
var config = Object.create(baseConfig);
config.debug = true;
config.devtool = 'cheap-module-eval-source-map';
config.entry = [
'webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr',
'./app/appentrypoint'
];
config.output.publicPath = 'http://localhost:3000/dist/';
config.module.loaders.push({
test: /^((?!\.module).)*\.css$/,
loaders: [
'style-loader',
'css-loader'
]
}, {
test: /\.module\.css$/,
loaders: [
'style-loader',
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!'
]
});
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({ "global.GENTLY": false }),
new webpack.DefinePlugin({
'__DEV__': true,
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
})
);
config.target = webpackTargetElectronRenderer(config);
module.exports = config;
最佳答案
浏览器本身没有模块系统，所以你的<script>标签包含 require('./appentrypoint.js')如果不包含在 bundle 中，则不会运行。
假设您的 webpack 配置的其余部分是正确的(快速浏览一下，它看起来不错)，您可以通过首先删除第二个 <script> 来解决此问题阻止您的 HTML 文件。您的 HTML 文件应如下所示:
<!DOCTYPE html>
<html>
<body >
<div id="root" class='section'></div>
<script src="http://localhost:3000/dist/bundle.js"></script>
</body>
</html>
现在您需要修复 appentrypoint.js ，像这样:
import React from 'react';
// if using ES6, best practice would be to switch "var" with "const" here
var mountNode = document.getElementById('root');
React.render(<img src='http://tinyurl.com/lkevsb9' />, mountNode);
这里的主要变化是您在应用程序的根目录中定义挂载节点，然后立即告诉 React.render() 在该节点上渲染您的组件。另外，您应该不需要 window.React = React; .
这应该可行，但如果您运行的是最新版本的 React，您可能会看到类似“警告:React.render 已弃用”的内容。这是因为 Facebook 开发人员决定将 DOM 相关工具从 React 中分离出来，放入一个完全独立的库中，React-DOM 。因此，为了将来的引用，您会 npm install react-dom --save你的根实际上看起来像这样:
import React from 'react';
import ReactDOM from 'react-dom';
const mountNode = document.getElementById('root');
ReactDOM.render(<img src='http://tinyurl.com/lkevsb9' />, mountNode);
在 react 中0.15.0及以上，React.render()不会是一个函数，所以最好养成尽早使用他们的新 API 的习惯。
关于javascript - 电子、 react 、Webpack "Uncaught SyntaxError: Unexpected reserved word"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34194946/