Question

我对javascript框架配置比较陌生，我正在尝试配置使用gulp，typescript和babel编写的库的编译/转换。我所面临的问题在于包含外部库。我的项目旨在使用MathJS，RequireJS，RXJS和JQuery。

在编译期间，我收到以下错误： Compilation errors

完成编译/转换后，我会引用我的入口点（/services/bid-manager.service.js），当我尝试加载文件时，出现以下错误： Runtime (Chrome conosole) errors

我目前的设置如下：

的package.json

{
  "name": "bid-manager-service",
  "version": "0.0.1",
  "description": "Service for calculating bids for PVBid",
  "main": "index.js",
  "scripts": {
    "test": "test"
  },
  "keywords": [
    "private",
    "pvbid",
    "bid",
    "manager"
  ],
  "author": "Michael J. Miller",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.1.1",
    "mathjs": "^3.6.0",
    "requirejs": "^2.3.2",
    "rxjs": "^5.0.0-rc.1"
  },
  "devDependencies": {
    "babel-polyfill": "^6.16.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-sourcemaps": "^2.2.0",
    "gulp-typescript": "^3.1.2",
    "typescript": "^2.0.6"
  }
}

tsconfig.json：

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "rootDir": "./src",
    "outDir": "./dist",
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

gulpfile.js

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var ts = require('gulp-typescript');
var babel = require('gulp-babel');

var tsProject = ts.createProject('./tsconfig.json');

gulp.task('default', function() {
    return gulp.src('src/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(ts(tsProject()))
        .pipe(babel())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('release'));
});

前几行到我的入口点，我收到了错误：

打字稿：

import { AsyncSubject } from 'rxjs/AsyncSubject';
import { Observable }   from 'rxjs/Observable';

透明的Javascript：

"use strict";

var AsyncSubject_1 = require('rxjs/AsyncSubject');
var bid_update_service_1 = require('./bid-update.service');
var bid_factory_1 = require('../factories/bid.factory');

提前感谢您的任何帮助！

Answer 1

这个错误让我第一次将打字稿集成到我的项目时感到很沮丧，但这是因为你没有为TS包含正确的打字（输入定义文件file.d.ts）。

要解释TS是JS的超集，因为它是一个超集，它要求您定义允许TS“学习”用于创建typescript编译时错误的包的包。例如，这是一个非常基本的例子;如果你有let foo: string的东西并且你传入一个数而不是foo = 1，那么当gulp尝试编译TS时你会收到错误。您在编译时将收到的错误是打字定义文件用于为非类型化JS文件提供“打字”。

注意：即使您收到这些错误，该文件也应该编译为JS，只要您没有错误，您的文件就可以与您的构建一起使用。虽然如果你继续使用带有输入错误的ts，那么最好只使用JS

如果你还没有这样做，你应该关注并熟悉Typings Doc。在您的计算机上全局安装打字，然后通过查找所需的打字来定义所需的打字。

例如，您将安装以下内容：

# Install typings library using npm    
npm install typings -g 

# Search the typings repositories for the one you want
# rxjs = your module 
typings search rxjs

# Choose from the ones that are available and replace dt~mocha below
# dt~ = the source usually either dt or npm 
typings install dt~rxjs--global --save

以下应该创建一个typings.json和typings文件夹，其中包含您在首次安装时下载的信息/文件。

关于键入定义文件，我要注意的一件事是并非所有js库都可用。因此，您需要：

完全重写您想要的JS文件
等到其他人发布您想要的包裹
如果您通过为所需模块创建一个打字定义文件（d.ts）来为打字社区做出冒险的贡献，我相信如果它还没有，很多人会很感激。

node_module包含在Typescript项目中

1 个答案: