无法让browserify使用babel-plugin-transform-class-properties [英] Can't get browserify to use babel-plugin-transform-class-properties

问题描述

我正在尝试在项目中使用 MobX ，并且尝试使用类属性.但是，当我通过browserify运行时(使用 Laravel的灵丹妙药).我收到错误Missing class properties transform. while parsing file.我缺少使类属性与browserify一起使用的东西吗?

I'm trying to use MobX in my project and I am attempting to use class properties. However, when I run through browserify (with Laravel's Elixir). I get the error Missing class properties transform. while parsing file. Is there something I'm missing to get class properties to work with browserify?

Browserify Failed!: /Users/.../resources/assets/js/pages/Show/CampaignStore.js: Missing class properties transform. while parsing file: /Users/.../resources/assets/js/pages/Show/CampaignStore.js
 Missing class properties transform.
  2 |
  3 | class CampaignStore {
> 4 |   id = Math.random();
    |   ^
  5 |   @observable title = '';
  6 |   @observable messages = [];
  7 |

我的.babelrc文件:

My .babelrc file:

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

班级

import { observable, computed } from 'mobx';

class CampaignStore {
  id = Math.random();
  @observable title = '';
  @observable messages = [];

  // ...
}

gulpfile.js

gulpfile.js

require('dotenv').config();
var elixir = require('laravel-elixir');

var HOST = process.env.SERVER || 'http://localhost';

elixir.config.js.browserify.transformers.push({
    name: 'babelify',
    options: {
        presets: ["es2015", "react", "stage-1"],
        plugins: ["transform-class-properties"]
    }
});

elixir(function(mix) {
    mix.browserify('pages/Show.js', 'public/js/bundles/show.js');

    mix.sass('clean.scss');

    mix.browserSync({
        proxy: HOST
    });
});

推荐答案

您应完全覆盖babelify转换器:

elixir.config.js.browserify.transformers
  .find(transformer => transformer.name === 'babelify')
  .options = {
    presets: ['es2015', 'react', 'stage-1'],
    plugins: ['transform-class-properties'],
  };

或仅使用相同的babel配置文件:

or just use the same babel config file:

elixir.config.js.browserify.transformers
  .find(transformer => transformer.name === 'babelify')
  .options = require('./package.json').babel;

这篇关于无法让browserify使用babel-plugin-transform-class-properties的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！