这里是 JS 新手:
我在这个 bug 上花了几天时间，我查看了很多答案并练习了我最认真的 Google-Fu，尝试了许多不同的 babel 插件和预设配置，并尝试迁移我的 webpack 1 项目进入 webpack 2 化身，最后我仍然碰壁。请给我帮助。
当我尝试构建我的项目时，全部开源 here ，以及最近在 webpack2migration 分支中与这个问题相关的活跃内容，我一直无法为生产进行构建(甚至在通过非生产性调试越来越多地使用它之后，甚至无法进行开发)
这是我尚未解决的错误，不可否认，因为我不理解 webpack 中的一些(也许很多)复杂性以及如何正确配置 babel 来解决我所遇到的问题。
这是错误:
ERROR in ../~/react-google-maps/src/lib/async/withScriptjs.js
Module parse failed: /Users/sg/Desktop/blog-home/node_modules/react-google-maps/src/lib/async/withScriptjs.js Unexpected token (19:23)
You may need an appropriate loader to handle this file type.
| export default function withScriptjs(WrappedComponent) {
| return class Container extends Component {
| static displayName = `withScriptjs(${getDisplayName(WrappedComponent)})`;
|
| static propTypes = {
最初，我认为这是 react-google-maps 的错误。 ，但我怀疑现在情况有所不同。几个月前，我在另一个项目中遇到过一次这种错误，而且我知道我大部分时间都把我的 package.json 搞得一团糟。
是的，我知道那里有很多愚蠢的问题，比如包重复、未使用的包、不必要的依赖项……我已经尝试了我能想到的每一个 Angular ，太努力了，而且对清理还不够仔细；我在 sleep 之前寻求帮助，并在早上再次尝试。
该项目旨在集成一个工作 small frontend game我正在制作原型(prototype)，我想将其集成到我的主页中，我也开始另一次清理和重构，以获得更好的演示和代码质量。
我谦虚地请求一些支持帮助来正确配置我的构建，但我显然遇到了很多麻烦。
当我开始将这个小游戏集成到我的主页中时，该构建在我的本地计算机上的开发和生产构建配置中都运行得很好，但是当我推送更改并触发构建到我的 Heroku 主机站点时，它一直失败我想是在同一个文件上，因为它无法解析它。
我希望这足以继续下去，并且我很乐意根据需要帮助缩小范围。 :)
致以诚挚的问候，感谢您抽出宝贵的时间!
package.json
{
"name": "react-sg-home-page",
"version": "0.0.9",
"description": "My home page and portfolio site",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/sgoldens/home.git"
},
"jest": {
"verbose": true,
"collectCoverage": true,
"setupTestFrameworkScriptFile": "mock-local-storage"
},
"config": {
"blanket": {
"pattern": [
""
],
"data-cover-never": [
"node_modules",
"__tests__",
"*.spec.*"
]
}
},
"engines": {
"node": "7.7.4"
},
"scripts": {
"buildcolors": "NODE_ENV=production webpack --config ./webpack.config.js --progress --colors",
"start_nf": "nf start",
"istanbul": "istanbul cover ./node_modules/mocha/bin/_mocha -- --reporter dot --full-trace __tests__",
"lint:watch": "npm run lint -- --watch",
"mochatest": "babel-node ./node_modules/.bin/isparta cover _mocha --require blanket -- --reporter dot --full-trace __tests__",
"postinstall": "webpack -p --config ./webpack.config.js",
"remove-public": "rm -rf ./public",
"test": "jest --coverage",
"test:watch": "npm test -- --watch",
"start_prod": "node server.js",
"start": "webpack-dev-server",
"dev": "webpack-dashboard -t 'Marvin' -- webpack-dev-server",
"build": "babel-node tools/build.js && babel-node tools/buildHtml.js",
"lint-break-on-errors": "eslint ./source/js ./webpack.config.js -f table --ext .js --ext .jsx",
"lint": "eslint ./source/js ./webpack.config.js -f table --ext .js --ext .jsx || true",
"preview": "rm -rf ./build && NODE_ENV=\"production\" webpack-dashboard -t 'Preview Mode - Marvin' -- webpack-dev-server",
"hook-add": "prepush install",
"hook-remove": "prepush remove",
"heroku-prebuild": "npm run remove-public && mkdir public",
"heroku-postinstall": "node server.js"
},
"author": "Sasha Goldenson",
"license": "MIT",
"devDependencies": {
"autoprefixer": "^6.5.3",
"babel-core": "^6.7.2",
"babel-eslint": "^7.1.0",
"babel-jest": "^19.0.0",
"babel-loader": "^6.2.4",
"babel-plugin-syntax-decorators": "^6.13.0",
"babel-plugin-transform-class-properties": "^6.6.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.6.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.16.0",
"babel-runtime": "^6.6.1",
"chai": "3.5.0",
"chai-jquery": "^2.0.0",
"css-loader": "^0.28.0",
"enzyme": "2.6.0",
"eslint": "^3.10.1",
"eslint-config-airbnb": "^14.1.0",
"eslint-config-google": "^0.7.1",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-node": "^4.2.2",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^6.10.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-watch": "2.1.11",
"expect": "^1.19.0",
"factory-girl": "^4.2.2",
"isparta": "^4.0.0",
"istanbul": "^1.0.0-alpha.2",
"jasmine-core": "^2.6.1",
"jest": "17.0.3",
"jest-cli": "*",
"karma": "^1.6.0",
"karma-chrome-launcher": "^2.0.0",
"karma-firefox-launcher": "^1.0.1",
"karma-jasmine": "^1.1.0",
"karma-safari-launcher": "^1.0.0",
"mocha": "3.1.2",
"mocha-lcov-reporter": "^1.3.0",
"mock-local-storage": "^1.0.2",
"nock": "^8.0.0",
"react-addons-test-utils": "^15.4.0",
"redux-mock-store": "^1.2.3",
"standard": "^10.0.2",
"webpack-dev-middleware": "1.6.1",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"axios": "^0.15.3",
"babel-cli": "^6.24.0",
"babel-core": "^6.24.0",
"babel-es6-polyfill": "^1.1.0",
"babel-loader": "^6.4.1",
"babel-plugin-class-display-name": "^2.1.0",
"babel-plugin-lodash": "^3.2.11",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-syntax-decorators": "^6.13.0",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-class-display-name": "^0.0.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-es2015-classes": "6.18.0",
"babel-plugin-transform-es2015-template-literals": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-plugin-transform-react-constant-elements": "^6.23.0",
"babel-plugin-transform-react-display-name": "^6.25.0",
"babel-plugin-transform-react-remove-prop-types": "^0.3.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-babili": "0.0.12",
"babel-preset-env": "^1.2.2",
"babel-preset-es2015": "^6.24.0",
"babel-preset-es2016": "^6.22.0",
"babel-preset-latest": "^6.24.0",
"babel-preset-modern-async": "^1.0.0-alpha.3",
"babel-preset-modern-browsers": "^9.0.2",
"babel-preset-react": "^6.1.18",
"babel-preset-stage-0": "^6.22.0",
"babel-preset-stage-1": "^6.1.18",
"babel-register": "^6.24.1",
"babel-relay-plugin-loader": "^0.10.0",
"babili-webpack-plugin": "0.0.11",
"blanket": "^1.2.3",
"bluebird": "^3.1.2",
"bootstrap": "^3.3.7",
"cheerio": "^0.20.0",
"colors": "1.1.2",
"compression": "^1.6.1",
"coveralls": "^2.12.0",
"css-loader": "^0.28.4",
"es6-promise": "^3.3.1",
"eventsource-polyfill": "0.9.6",
"express": "~4.9.8",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"font-awesome": "^4.7.0",
"foreman": "2.0.0",
"get-env": "^0.5.10",
"history": "^4.6.3",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.24.1",
"image-webpack-loader": "^3.3.0",
"immutability-helper": "^2.2.2",
"immutable": "^3.8.1",
"isomorphic-fetch": "^2.2.1",
"jquery": "^3.2.1",
"json-loader": "^0.5.4",
"lodash-webpack-plugin": "^0.11.2",
"lodash.debounce": "^4.0.8",
"material-ui": "^0.16.0-rc2",
"node-sass": "^3.13.0",
"npm-run-all": "^1.8.0",
"open": "0.0.5",
"postcss-loader": "^1.1.1",
"prepush": "^3.1.11",
"prop-types": "^15.5.10",
"react": "^15.6.0",
"react-addons-css-transition-group": "^15.6.0",
"react-addons-update": "^15.6.0",
"react-bootstrap": "^0.30.7",
"react-display-name": "^0.2.0",
"react-dom": "15.6.1",
"react-google-maps": "^7.0.0",
"react-icons": "^2.2.5",
"react-lazy-cache": "^3.0.1",
"react-logo": "^1.0.8",
"react-modal": "1.5.2",
"react-mui-speeddial": "0.0.6",
"react-pure-render": "^1.0.2",
"react-redux": "^4.4.6",
"react-router-bootstrap": "^0.23.1",
"react-router-dom": "next",
"react-rte": "^0.11.0",
"react-rte-image": "^0.11.1",
"react-rte-material": "^0.12.5",
"react-tap-event-plugin": "*",
"react-tooltip": "3.2.2",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4",
"redbox-react": "^1.3.4",
"redux": "^3.0.4",
"redux-devtools": "^3.3.2",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-extension": "^2.13.0",
"redux-devtools-log-monitor": "^1.2.0",
"redux-form": "6.6.1",
"redux-form-material-ui": "^4.1.3",
"redux-logger": "^3.0.0",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.2.0",
"regenerator-runtime": "^0.10.3",
"reinstall": "^1.1.1",
"reselect": "^3.0.0",
"rimraf": "^2.5.2",
"sass-loader": "^4.0.2",
"serve-favicon": "^2.3.0",
"sinon": "1.17.6",
"style-loader": "0.13.1",
"svg-react-loader": "^0.3.7",
"svg-sprite-loader": "^2.1.0",
"svgo": "^0.7.2",
"svgo-loader": "^1.2.1",
"transform-runtime": "0.0.0",
"url-loader": "0.5.7",
"webpack": "^2.2.1",
"webpack-dashboard": "^0.4.0",
"webpack-dev-server": "^2.2.1",
"webpack-hot-middleware": "2.10.0",
"youtube-api-search": "0.0.5"
},
"bugs": {
"url": "https://github.com/sgoldens/home/issues"
},
"homepage": "https://github.com/sgoldens/home#readme",
"keywords": [
"home"
],
"prepush": [
"npm run lint-break-on-errors --silent"
]
}
.babelrc
{
"plugins": [
["transform-class-properties", { "spec": true }],
"transform-class-display-name",
"class-display-name",
"transform-react-display-name",
"syntax-decorators",
"transform-decorators-legacy",
["transform-es2015-template-literals", {
"loose": true,
"spec": true
}]
],
"presets": [
"react",
"es2015",
"stage-0"
],
"env": {
"development": {
"presets": [
"react-hmre"
]
}
}
}
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const DashboardPlugin = require('webpack-dashboard/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const SpritePlugin = require('svg-sprite-loader/plugin');
const autoprefixer = require('autoprefixer');
const nodeEnv = process.env.NODE_ENV || 'development';
const isProduction = nodeEnv === 'production';
const jsSourcePath = path.join(__dirname, './src');
const buildPath = path.join(__dirname, './build');
const imgPath = path.join(__dirname, './images');
const iconPath = path.join(__dirname, './images');
const sourcePath = path.join(__dirname, './src');
// Common plugins
const plugins = [
new SpritePlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'build',
filename: 'build.js',
minChunks(module) {
const context = module.context;
return context && context.indexOf('node_modules') >= 0;
},
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(nodeEnv),
'API_HOST': JSON.stringify('https://posts-sgoldens.herokuapp.com'),
'API_PORT': JSON.stringify(process.env.PORT || 5000)
},
}),
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
template: path.join(sourcePath, 'index.html'),
path: buildPath,
filename: 'index.html',
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer({
browsers: [
'last 3 version',
'ie >= 10',
],
}),
],
context: sourcePath,
},
}),
];
// Common rules
const rules = [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
'babel-loader',
],
},
{
test: /\.svg$/,
use: [
{
loader: 'svg-sprite-loader',
options: {
extract: true,
spriteFilename: 'icons-sprite.svg',
},
},
'svgo-loader',
],
include: iconPath,
},
{
test: /\.(png|gif|jpg|svg)$/,
include: imgPath,
use: 'url-loader?limit=20480&name=assets/[name]-[hash].[ext]',
},
];
if (isProduction) {
// Production plugins
plugins.push(
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true,
},
output: {
comments: false,
},
}),
new ExtractTextPlugin('style-[hash].css')
);
// Production rules
rules.push(
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader!postcss-loader!sass-loader',
}),
}
);
} else {
// Development plugins
plugins.push(
new webpack.HotModuleReplacementPlugin(),
new DashboardPlugin()
);
// Development rules
rules.push(
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
'style-loader',
// Using source maps breaks urls in the CSS loader
// https://github.com/webpack/css-loader/issues/232
// This comment solves it, but breaks testing from a local network
// https://github.com/webpack/css-loader/issues/232#issuecomment-240449998
// 'css-loader?sourceMap',
'css-loader',
'postcss-loader',
'sass-loader?sourceMap',
],
}
);
}
module.exports = {
devtool: isProduction ? false : 'source-map',
context: jsSourcePath,
entry: {
js: './index.js',
},
output: {
path: buildPath,
publicPath: '/',
filename: 'bundle.js',
},
module: {
rules,
},
resolve: {
extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
modules: [
path.resolve(__dirname, 'node_modules'),
jsSourcePath,
],
},
plugins,
devServer: {
contentBase: isProduction ? buildPath : sourcePath,
historyApiFallback: true,
port: 3000,
compress: isProduction,
inline: !isProduction,
hot: !isProduction,
host: '0.0.0.0',
disableHostCheck: true,
stats: {
assets: true,
children: false,
chunks: false,
hash: false,
modules: false,
publicPath: false,
timings: true,
version: false,
warnings: true,
colors: {
green: '\u001b[32m',
},
},
},
};
最佳答案
您的代码正在从node_modules文件夹导入单独的源文件react-google-maps/*src*/lib/async/withScriptjs.js
但是你的 webpack 规则将 node_modules 中的文件排除在 babel 编译过程之外
{
test: /\.(js|jsx)$/,
exclude: /node_modules/, // NB!
use: [
'babel-loader',
],
}
您可以导入编译版本 /react-google-maps/**lib**/async/withScriptjs.js
关于javascript - ES2015 转译错误；静态属性类型、显示名称；配置 webpack、babel，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44903913/