【发布时间】:2018-02-09 08:45:06
【问题描述】:
我提前为我的大概英语道歉:)
这里有一个小回顾: 我们有一个 Rails 4 项目,最近我们用 React_on_rails gem 添加了一些 React 组件,所以我们需要实现 Webpack 作为 Asset Pipeline 的朋友(是的,我知道,Rails 5 做得更好)
所以问题是,当我尝试在 staging 上部署时,以及尝试在其上执行 yarn run build:production 时:
$ NODE_ENV=production webpack -p --config webpack.config.js
/home/unisc/apps/staging/releases/20170831104131/client/node_modules/react-on-rails/webpackConfigLoader.js:14
const { join, resolve } = require('path');
^
SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object.<anonymous> (/home/unisc/apps/****_staging/releases/20170831104131/client/webpack.config.js:13:27)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
这是我的 package.json :
{
"name": "****",
"private": true,
"scripts": {
"build:test": "NODE_ENV=test webpack --config webpack.config.js",
"build:production": "NODE_ENV=production webpack --config webpack.config.js",
"build:development": "NODE_ENV=development webpack -w --config webpack.config.js"
},
"cacheDirectories": ["node_modules", "client/node_modules"],
"dependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-loader": "^6.3.2",
"babel-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"es5-shim": "^4.5.9",
"expose-loader": "^0.7.3",
"imports-loader": "^0.7.1",
"js-yaml": "^3.8.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-on-rails": "8.0.0",
"webpack": "^2.3.3",
"webpack-manifest-plugin": "^1.1.0"
},
"devDependencies": {
}
}
还有我的 webpack.config.js :
// For inspiration on your webpack configuration, see:
// https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client
// https://github.com/shakacode/react-webpack-rails-tutorial/tree/master/client
const webpack = require('webpack');
const { resolve } = require('path');
const ManifestPlugin = require('webpack-manifest-plugin');
const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
const configPath = resolve('..', 'config');
const { devBuild, manifest, webpackOutputPath, webpackPublicOutputDir } =
webpackConfigLoader(configPath);
const config = {
context: resolve(__dirname),
entry: {
'webpack-bundle': [
'es5-shim/es5-shim',
'es5-shim/es5-sham',
'babel-polyfill',
'./app/bundles/registration',
],
},
output: {
// Name comes from the entry section.
filename: '[name]-[hash].js',
// Leading slash is necessary
publicPath: `/${webpackPublicOutputDir}`,
path: webpackOutputPath,
},
resolve: {
extensions: ['.js', '.jsx'],
},
plugins: [
new webpack.EnvironmentPlugin({
NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined
DEBUG: false,
}),
new ManifestPlugin({ fileName: manifest, writeToFileEmit: true }),
],
module: {
rules: [
{
test: require.resolve('react'),
use: {
loader: 'imports-loader',
options: {
shim: 'es5-shim/es5-shim',
sham: 'es5-shim/es5-sham',
},
},
},
{
test: /\.jsx?$/,
use: 'babel-loader',
exclude: /node_modules/,
},
],
},
};
module.exports = config;
if (devBuild) {
console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
module.exports.devtool = 'eval-source-map';
} else {
console.log('Webpack production build for Rails'); // eslint-disable-line no-console
}
我试图找到同样的问题,但没有成功......
此命令适用于我的机器,两者(我的机器和暂存)具有相同版本的 webpack,并且无论如何他们使用 node_modules 中的那个。
感谢阅读,祝你有美好的一天;)
我尝试过的:
- npm 升级、yarn 升级、删除 node_modules 并重试
- 将整个配置文件转换为 es5,但它碰到了依赖项中的另一个花括号
- 试图移动,删除 .babelrc 文件
我实际上在尝试什么:
- 看起来 es6 转译很糟糕
【问题讨论】:
-
你有
.babelrc文件吗? -
哇,你真快!这是:
{ "presets": ["es2015", "stage-2", "react"] } -
检查
babelrc是否存在于您正在调用部署任务的目录中。 -
是的!在执行任务的client/文件夹中
-
由于某种原因它看起来好像丢失了。
标签: ruby-on-rails reactjs webpack yarnpkg react-on-rails