Question

如何使用阶段x“预设”中的两个特定Babel插件，而不必使用整个预设？

具体来说，我想在我的ES6课程中使用transform-class-properties和transform-decorators，这两个课程目前都是针对ES7提出的，也是stage-1预设的一部分。

Answer 1

presets只是较小plugins的集合，因此您可以使用该选项来引入所需的转换：

.babelrc（或配置）

{
  "presets": ["es2015"],
  "plugins": ["transform-class-properties", "transform-decorators"]
}

将为您提供所有ES2015 +类属性+装饰器

Answer 2

@RGraham的回答很有帮助 - 也想分享更多细节......

我正在使用gulp，所以首先我必须从gulp-babel 5.x升级到6.x： npm install --save-dev babel/gulp-babel

然后我需要安装ES2015预设和我想要使用的两个插件（+我使用ReactJS时的反应预设）：

  npm install --save-dev babel-preset-es2015
  npm install --save-dev babel-preset-react
  npm install --save-dev babel-plugin-transform-class-properties 
  npm install --save-dev babel-plugin-transform-decorators

最后，我将以下配置传递给Babel（您也可以在.babelrc文件中指定此内容）：

{
  presets: ['es2015', 'react'],
  plugins: [
    ["transform-class-properties"],
    ["transform-decorators"]
  ]
}

您的JavaScript linter会抱怨ES7语法。 This blog post描述了解决方案：修改lintjs以使用Babel作为JavaScript解析器。在"parser": "babel-eslint"文件中设置.eslintrc，然后

npm install --save-dev babel-eslint

最后，对于任何其他ReactJS人员，请确保修改组件的构造函数以包含props和context参数，否则您可能会收到类似TypeError: Cannot read property 'xxx' of undefined的运行时错误。这是一个例子：

/**
   * ES6 constructor method (takes the place of the old React componentWillMount() method).
   * 
   * @param  {Object} props   See https://facebook.github.io/react/docs/reusable-components.html
   * @param  {Object} context See https://facebook.github.io/react/docs/context.html
   */
  constructor(props, context) {
    super(props, context);
    log.debug(`Creating ${this.constructor.name} instance`, props, context);
  }

Babel：使用stage-x预设插件的子集？

2 个答案: