在 karma 中使用“tsify”启用“对装饰器的实验性支持”

Posted 2023-02-23

【中文标题】在 karma 中使用“tsify”启用“对装饰器的实验性支持”

【英文标题】：Enable "Experimental support for decorators" with "tsify" in karma

【发布时间】：2017-02-22 19:16:45

【问题描述】：

我正在使用 tsify，一个 browserify 插件，在 karma 单元测试期间转译我的代码。

我在运行测试时遇到这种错误：

TypeScript 错误：src/app/emailLogin/emailLogin.component.ts(14,14)：错误 TS1219：对装饰器的实验性支持是一项可能在未来版本中更改的功能。设置“experimentalDecorators”选项以删除此警告。

如何在我的 karma.config.js 中指定的 browserify/tsify 中启用实验装饰器

这是我的 karma.config.js：

module.exports = function(config) 
  config.set(
    browsers: ['Chrome'],
    frameworks: ['jasmine', 'browserify', 'es6-shim'],
    files: [
      'src/**/*.spec.ts'
    ],
    preprocessors: 
      '**/*.ts': ['browserify']
    ,
    browserify: 
      debug: true,
      plugin: ['tsify'],
      transform: ['browserify-shim']
    
  );
;

这是我的 gulp 文件（我认为这无关紧要）

var gulp = require('gulp');
var Server = require('karma').Server;

/**
 * Run test once and exit
 */
gulp.task('test', function (done) 
  new Server(
    configFile: __dirname + '/karma.conf.js',
    singleRun: true
  , done).start();
);

/**
 * Watch for file changes and re-run tests on each change
 */
gulp.task('tdd', function (done) 
  new Server(
    configFile: __dirname + '/karma.conf.js'
  , done).start();
);

gulp.task('default', ['tdd']);

【问题讨论】：

你的 tsconfig 是什么样的？我也一直在使用tsify，它并没有为我抛出那个错误

【参考方案1】：

有两个compiler options 与装饰器有关：

--emitDecoratorMetadata
--experimentalDecorators

通常，它们会在您项目的 tsconfig.json 文件中启用（tsify 将搜索并加载 tsconfig.json）：

    "compilerOptions": 
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5"
    ,
    "files": []

如果由于某种原因您没有使用tsconfig.json 文件，则可以在 Karma 的 browserify 插件配置中启用它们（注意数组中的数组）：

browserify: 
    debug: true,
    plugin: [['tsify', 
        emitDecoratorMetadata: true,
        experimentalDecorators: true
    ]],
    transform: ['browserify-shim']

它们也可以通过命令行启用：

browserify -p [tsify --emitDecoratorMetadata --experimentalDecorators] main.ts > bundle.js