如何让装饰工作与babel&的WebPack？ [英] How do I get decorators working with babel & webpack?

问题描述

我有以下设置：

{
  "babel-core": "~5.8.25",
  "babel-eslint": "^4.1.3",
  "babel-loader": "~5.3.2",
  "babel-polyfill": "^6.2.0",
  "eslint": "^1.7.3",
  "eslint-config-airbnb": "^0.1.0",
  "eslint-loader": "~1.1.0",
  "eslint-plugin-angular": "~0.12.0",
  // ...
}

webpack：

module: {
  preLoaders: [{ test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader'}],
  loaders: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loaders: ['ng-annotate', 'babel-loader?plugins[]=transform-decorators-legacy'],
    }
  ]
}

但是我收到以下错误：

TypeError: The plugin "transform-decorators-legacy" didn't export a Plugin instance 

有谁知道我的意思在这里做错了吗？

Does anyone know what I'm doing wrong here?

更新

我已升级到Babel 6现在进行以下设置：

I've since upgraded to Babel 6 and now have the following set up:

{
  "babel-core": "^6.0.0",
  "babel-eslint": "^4.1.3",
  "babel-loader": "^6.0.0",
  "babel-plugin-transform-decorators-legacy": "^1.3.4",
  "babel-polyfill": "^6.2.0",
  "babel-preset-es2015": "^6.0.0",
  "babel-preset-stage-0": "^6.5.0",
  "eslint": "^1.10.0",
  "eslint-config-airbnb": "^4.0.0",
  "eslint-loader": "^1.2.0",
  "eslint-plugin-angular": "^0.15.0",
  // ...
}

和：

module: {
  preLoaders: [{ test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader'}],
  loaders: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loaders: ['ng-annotate', 'babel?presets[]=es2015&presets[]=stage-0&plugins[]=transform-decorators-legacy'],
    }
  ]
},

但是得到解析错误：意外的令牌ILLEGAL 引用装饰器。

推荐答案

经过一些搜索和这个SO答案后，我能够让它无需工作使用 .babelrc 文件。

After some searching and this SO answer, I was able to get it working without using a .babelrc file.

npm install --save-dev babel-plugin-transform-decorators-legacy

loaders: [
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loader: 'babel',
    query: {
      plugins: ['transform-decorators-legacy'],
      presets: ['es2015', 'stage-0', 'react']
    }
  }
]

这篇关于如何让装饰工作与babel&的WebPack？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！