"SyntaxError: Unexpected token {"：tsconfig 无法将node_modules中的文件识别为有效的打字稿

Question

我正在从node_modules文件夹中的自定义包中引用一个简单的函数，并意识到它正在尝试将文件读取为javascript而不是打字稿。我需要在我的 tsconfig.json 中修改哪些设置才能正常工作？

我尝试将 accessibilityCheck 函数包装在类中并使其成为模块的一部分，并从自定义包中导出模块以用于我的测试。还尝试将导入语句换成 require 语句。

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2016"
    ],
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc-e2e",
    "sourceMap": true,
    "target": "es6",
    "typeRoots": [
      "../node_modules/@types"
    ]
  },
  "include": ["../node_modules/e2e-utilities/*.ts"]
}

e2e-utilities是我们导入到当前项目的自定义软件包

node_modules/e2e-utilties/accessibility-check.ts

import { browser } from 'protractor';
import { AxeResults } from 'axe-core';
import { SarifLog, convertAxeToSarif } from 'axe-sarif-converter';
const util = require('util');
const fs = require('fs');
const path = require('path');
const axeBuilder = require('axe-webdriverjs');
export async function accessibilityCheck(
    fileName: string,
    selectorsToExclude?: string[],
    selectorsToInclude?: string[]): Promise<AxeResults> {
    const builder = axeBuilder(browser.driver);
    if (selectorsToInclude) {
        selectorsToInclude.forEach(selector => builder.include(selector));
    }
    if (selectorsToExclude) {
        selectorsToExclude.forEach(selector => builder.exclude(selector));
    }
    const axeResults: AxeResults = await builder.analyze();
    const sarifResults: SarifLog = convertAxeToSarif(axeResults);
    const a11yResultsFilepath = path.join(__dirname, '../..', 'accessibilityresults');
    if (!fs.existsSync(a11yResultsFilepath)) {
        await util.promisify(fs.mkdir)(a11yResultsFilepath);
    }
    const filepath = path.join(a11yResultsFilepath, fileName);
    await util.promisify(fs.writeFile)(filepath, JSON.stringify(sarifResults));
    return axeResults;
}

测试文件

describe('Accessibility demo', () => {
    it('Running accessibility check on dashboard', async () => {
        const results = await accessibilityCheck('attract-dashboard.sarif', ['#talent-header'], []);
    });
});

量角器.js

const { SpecReporter } = require('jasmine-spec-reporter');
const VideoReporter = require('protractor-video-reporter');
const Path = require('path');
exports.config = {
    allScriptsTimeout: 11000,
    useAllAngular2AppRoots: true,
    specs: [
        Path.join('../../../../../', '/e2e/accessibility/**/*.a11y-spec.ts')
    ],
    capabilities: {
        'browserName': 'chrome',
        chromeOptions: {
            args: [
                '--start-maximized'
            ]
        }
    },
    chromeOnly: true,
    directConnect: true,
    baseUrl: 'https://localhost:443/',
    framework: 'jasmine',
    jasmineNodeOpts: {
        showColors: true,
        defaultTimeoutInterval: 110000,
        print: function () { }
    },
    beforeLaunch: function () {
        require('ts-node').register({
            project: 'e2e/tsconfig.json'
        });
    },
    onPrepare: function () {
        // Overrides default format of .mov to .avi to work in windows
        VideoReporter.prototype.jasmineStarted = function() {
            var self = this;
            if (self.options.singleVideo) {
                var videoPath = Path.join(self.options.baseDirectory, 'protractor-accessibility-specs.avi');
                self._startScreencast(videoPath);
                if (self.options.createSubtitles) {
                    self._subtitles = [];
                    self._jasmineStartTime = new Date();
                }
            }
        };
        console.log(process.env.DISPLAY)
        jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
        var failFast = require('jasmine-fail-fast');
        jasmine.getEnv().addReporter(failFast.init());
        jasmine.getEnv().addReporter(new VideoReporter({
            baseDirectory: Path.join(__dirname, 'a11y_report', Date.now().toString()),
            createSubtitles: true,
            singleVideo: true,
            ffmpegCmd: Path.normalize('C:/ffmpeg/bin/ffmpeg.exe'),
            ffmpegArgs: [
                '-f', 'gdigrab',
                '-framerate', '30',
                '-i', 'desktop',
                '-q:v','5'
            ]
          }));
    }
};

e2e-utilitiesaccessibility-check.ts:7
import { browser } from 'protractor';
SyntaxError: Unexpected token {

相反，我希望这个文件像普通的打字稿文件一样解析，而不是javascript文件并且失败。

Answer 1

节点模块通常应该提前捆绑。 当您收到此类错误时，请要求库开发人员提前转译，并包含声明以保持类型安全。