1
我正在使用transform-decorators-legacy我仍然在下面的錯誤。該項目是基於反應 - 普遍 - 熱點的例子，但擴展了。我相信這個問題是在.babelrc或我的webpack配置。裝修不支持在Babel 6.x + Webpack 2 + React
我很感激任何幫助。先謝謝你。
錯誤：「BabelLoaderError：SyntaxError：Decorator在6.x中尚未得到官方支持，正在等待提案更新。」
> 12 | export default class ReportSubscriptionSelector extends Component {
的package.json：（去掉了一些代碼，這是unnessesary）意識到這裏的一些問題。
{
"dependencies": {
"antd": "^2.6.3",
"autobind-decorator": "^1.3.3",
"autoprefixer": "^6.6.1",
"autoprefixer-loader": "^3.1.0",
"axios": "^0.7.0",
"babel-core": "^6.5.2",
"babel-loader": "^6.2.1",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-react-display-name": "^6.3.13",
"babel-plugin-transform-runtime": "^6.3.13",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"babel-register": "^6.18.0",
"babel-runtime": "^6.20.0",
"body-parser": "^1.14.1",
"bootstrap-loader": "^2.0.0-beta.19",
"bootstrap-sass-loader": "^1.0.10",
"classnames": "^2.2.3",
"clean-webpack-plugin": "^0.1.15",
"client-sessions": "^0.7.0",
"compression": "^1.6.0",
"concurrently": "^0.1.1",
"eslint": "1.10.3",
"eslint-config-airbnb": "0.1.0",
"eslint-plugin-import": "^0.8.0",
"eslint-plugin-react": "^3.5.0",
"expose-loader": "^0.7.1",
"express": "^4.13.3",
"express-session": "^1.12.1",
"extract-text-webpack-plugin": "^2.0.0-beta.5",
"file-loader": "^0.8.5",
"font-awesome": "^4.4.0",
"font-awesome-webpack": "0.0.4",
"history": "^2.0.1",
"hoist-non-react-statics": "^1.0.3",
"http-proxy": "^1.12.0",
"immutable": "^3.7.6",
"imports-loader": "^0.7.0",
"invariant": "^2.2.0",
"isomorphic-fetch": "^2.2.0",
"jquery": "^3.1.1",
"ladda": "^0.9.8",
"less": "^2.5.3",
"less-loader": "^2.2.1",
"lodash.capitalize": "^3.0.0",
"lodash.clone": "^4.0.1",
"lodash.difference": "^4.0.1",
"lodash.filter": "^3.1.1",
"lodash.forown": "^3.0.2",
"lodash.isequal": "^4.0.0",
"lodash.merge": "^3.3.2",
"lodash.omit": "^4.0.1",
"lodash.partition": "^4.2.0",
"lodash.pick": "^4.0.1",
"lodash.pluck": "^3.1.2",
"lodash.some": "^3.2.3",
"lodash.union": "^3.1.0",
"lru-memoize": "^1.0.0",
"map-props": "^1.0.0",
"material-ui": "^0.14.2",
"moment": "^2.10",
"multireducer": "^2.0.0",
"node-sass": "^4.3.0",
"normalizr": "^2.0.0",
"piping": "^0.3.0",
"pretty-error": "^1.2.0",
"query-string": "^3.0.0",
"re-notif": "^1.0.2",
"react": "^0.14.8",
"react-bootstrap": "^0.28.1",
"react-bootstrap-table": "^3.0.0-beta.6",
"react-datagrid": "^2.0.1",
"react-date-range": "^0.9.0",
"react-dnd": "^2.1.2",
"react-dnd-html5-backend": "^2.1.2",
"react-document-meta": "^2.0.0",
"react-dom": "^0.14.8",
"react-immutable-render-mixin": "^0.9.0",
"react-inline-css": "^2.0.0",
"react-ladda": "FoxxMD/react-ladda#2989787",
"react-loader-advanced": "^0.7.0",
"react-overlays": "^0.5.4",
"react-redux": "^4.0.0",
"react-router": "^2.0.0",
"react-router-bootstrap": "^0.20.1",
"react-router-redux": "^4.0.0",
"react-select": "^1.0.0-beta8",
"react-spinkit": "^1.1.4",
"react-tap-event-plugin": "^0.2.1",
"react-toastr": "2.8.0",
"recompose": "^0.14.5",
"redbox-react": "^1.1.1",
"redux": "^3.0.4",
"redux-async-connect": "^1.0.0-rc2",
"redux-devtools": "^3.0.0-beta-3",
"redux-devtools-dock-monitor": "^1.0.0-beta-3",
"redux-devtools-log-monitor": "^1.0.0-beta-3",
"redux-form": "^3.0.12",
"redux-promise-middleware": "^2.3.1",
"redux-router": "^1.0.0-beta7",
"redux-storage": "^1.4.4",
"redux-thunk": "^2.1.0",
"reselect": "^2.2.1",
"resolve-url-loader": "^1.4.3",
"restler": "^3.4.0",
"scroll-behavior": "^0.3.2",
"serialize-javascript": "^1.1.2",
"serve-favicon": "^2.3.0",
"sifter": "^0.4.5",
"sinon": "^1.17.2",
"socket.io": "^1.3.7",
"socket.io-client": "^1.3.7",
"superagent": "^1.4.0",
"timekeeper": "0.0.5",
"url-loader": "^0.5.7",
"validator": "^4.5.0",
"warning": "^2.1.0",
"webpack": "^2.2.0",
"webpack-isomorphic-tools": "^2.6.6"
},
"devDependencies": {
"autoprefixer-loader": "^3.1.0",
"babel-cli": "^6.22.2",
"babel-eslint": "^7.1.1",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.22.0",
"babel-plugin-typecheck": "^3.6.0",
"babel-preset-es2015": "^6.22.0",
"better-npm-run": "^0.0.8",
"bootstrap-loader": "^2.0.0-beta.19",
"bootstrap-material-design": "^0.3.0",
"bootstrap-sass": "^3.3.5",
"chai": "^3.3.0",
"clean-webpack-plugin": "^0.1.15",
"concurrently": "^0.1.1",
"css-loader": "^0.26.1",
"eslint": "1.10.3",
"eslint-config-airbnb": "0.1.0",
"eslint-loader": "^1.0.0",
"eslint-plugin-import": "^0.8.0",
"eslint-plugin-react": "^3.5.0",
"exports-loader": "^0.6.3",
"font-awesome": "^4.4.0",
"font-awesome-webpack": "0.0.4",
"imports-loader": "^0.7.0",
"isomorphic-fetch": "^2.2.0",
"json-loader": "^0.5.4",
"karma": "^0.13.10",
"karma-cli": "^0.1.1",
"karma-mocha": "^0.2.0",
"karma-mocha-reporter": "^1.1.1",
"karma-phantomjs-launcher": "^0.2.1",
"karma-sourcemap-loader": "^0.3.5",
"karma-webpack": "^1.7.0",
"mocha": "^2.3.3",
"node-sass": "^4.3.0",
"phantomjs": "^1.9.18",
"phantomjs-polyfill": "0.0.1",
"postcss-loader": "^1.2.2",
"react-a11y": "^0.2.6",
"react-addons-test-utils": "^0.14.8",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4",
"redbox-react": "^1.1.1",
"redux-async-connect": "^1.0.0-rc2",
"redux-devtools": "^3.0.0-beta-3",
"redux-devtools-dock-monitor": "^1.0.0-beta-3",
"redux-devtools-log-monitor": "^1.0.0-beta-3",
"resolve-url-loader": "^1.6.1",
"sass-loader": "^4.1.1",
"strip-loader": "^0.1.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack-dev-middleware": "^1.4.0",
"webpack-hot-middleware": "^2.5.0"
},
"engines": {
"node": "5.6.0"
}
}
.babelrc
{
"presets": [
"react",
"es2015",
"stage-0"
],
"plugins": [
"transform-decorators-legacy",
"transform-runtime",
"add-module-exports",
"transform-react-display-name"
],
"env": {
"development": {
"plugins": [
"typecheck",
[
"react-transform",
{
"transforms": [
{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
},
{
"transform": "react-transform-catch-errors",
"imports": [
"react",
"redbox-react"
]
}
]
}
]
]
}
}
}
dev.config.js：（webpack.config用於開發）
require('babel-polyfill');
// Webpack config for development
var fs = require('fs');
var path = require('path');
var webpack = require('webpack');
var assetsPath = path.resolve(__dirname, '../static/dist');
var host = (process.env.HOST || 'localhost');
var port = parseInt(process.env.PORT) + 1 || 3001;
var themePath = path.join(__dirname, '../src/theme');
// https://github.com/halt-hammerzeit/webpack-isomorphic-tools
var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));
var babelrc = fs.readFileSync('./.babelrc');
var babelrcObject = {};
var ExtractTextPlugin = require("extract-text-webpack-plugin");
try {
babelrcObject = JSON.parse(babelrc);
} catch (err) {
console.error('==> ERROR: Error parsing your .babelrc.');
console.error(err);
}
var babelrcObjectDevelopment = babelrcObject.env && babelrcObject.env.development || {};
var babelLoaderQuery = Object.assign({}, babelrcObject, babelrcObjectDevelopment);
delete babelLoaderQuery.env;
babelLoaderQuery.plugins = babelLoaderQuery.plugins || [];
for (var i = 0; i < babelLoaderQuery.plugins.length; ++i) {
var plugin = babelLoaderQuery.plugins[i];
if (Array.isArray(plugin) && plugin[0] === 'react-transform') {
reactTransform = plugin;
}
}
if (!reactTransform) {
reactTransform = ['react-transform', { transforms: [] }];
babelLoaderQuery.plugins.push(reactTransform);
}
if (!reactTransform[1] || !reactTransform[1].transforms) {
reactTransform[1] = Object.assign({}, reactTransform[1], { transforms: [] });
}
// make sure react-transform-hmr is enabled
reactTransform[1].transforms.push({
transform: 'react-transform-hmr',
imports: ['react'],
locals: ['module']
});
module.exports = {
devtool: 'source-map',
context: path.resolve(__dirname, '..'),
entry: {
'main': [
'webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr',
'font-awesome-webpack!./src/theme/font-awesome.config.js',
`bootstrap-loader/lib/bootstrap.loader?extractStyles&configFilePath=${themePath}/bs3.yml!bootstrap-loader/no-op.js`,
'./src/client.js'
]
},
output: {
path: assetsPath,
filename: '[name]-[hash].js',
chunkFilename: '[name]-[chunkhash].js',
publicPath: 'http://' + host + ':' + port + '/dist/'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: JSON.stringify(babelLoaderQuery)
},
{
loader: 'eslint-loader'
}]
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader'
}
]
},
{
test: /\.less$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: '2',
sourceMap: true,
localIdentName: '[local]___[hash:base64:5]'
}
},
{
loader: 'postcss-loader'
},
{
loader: 'less-loader',
options: {
outputStyle: 'expanded',
sourceMap: true
}
}
]
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: '2',
sourceMap: true
}
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: true,
}
}
]
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [
{
loader: 'url-loader',
options: {
limit: '10000',
mimeType: 'application/font-woff'
}
}
]
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader'
}
]
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: '10000',
mimeType: 'application/octet-stream'
},
}
]
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: '10000',
mimeType: 'image/svg+xml'
}
}]
},
{
test: webpackIsomorphicToolsPlugin.regular_expression('images'),
use: [{
loader: 'url-loader',
options: {
limit: '10240'
}
}]
},
]
},
resolve: {
modules: [
'src',
'node_modules'
],
extensions: ['.json', '.js', 'jsx']
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
Tether: "tether",
"window.Tether": "tether",
Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
Button: "exports-loader?Button!bootstrap/js/dist/button",
Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
Util: "exports-loader?Util!bootstrap/js/dist/util",
}),
// css files from the extract-text-plugin loader
new ExtractTextPlugin({ filename: '[name]-[chunkhash].css', allChunks: true }),
// hot reload
new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(/webpack-stats\.json$/),
new webpack.DefinePlugin({
__CLIENT__: true,
__SERVER__: false,
__DEVELOPMENT__: true,
__DEVTOOLS__: true // <-------- DISABLE redux-devtools HERE
}),
webpackIsomorphicToolsPlugin.development()
]
};