Question

我有一个用Yeoman（https://github.com/yeoman/generator-webapp）生成的webapp。最初，我使用JavaScript，一切正常，但是我想开始学习一些TypeScript。

我用npm安装了打字稿和gulp-typescript。之后，我将旧的JavaScript代码转换为TypeScript。

typescript.ts

// tslint:disable:no-console newline-per-chained-call
// <reference path ="../../node_modules/@types/jquery/index.d.ts"/>

import * as $ from '../../node_modules/jquery/dist/jquery.js';

我认为其余代码无关紧要，因为它可以作为JS使用，并且我只添加了一些输入并符合某些TSLint标准。它编译时没有错误或警告。我必须添加该“引用”和该“导入”，因为否则它会因jQuery的东西而发疯。

编译为：

"use strict";
// tslint:disable:no-console newline-per-chained-call
// <reference path ="../../node_modules/@types/jquery/index.d.ts"/>
exports.__esModule = true;
var $ = require("../../node_modules/jquery/dist/jquery.js");

它不能按预期方式工作，并且在Chrome控制台中出现以下错误：

未捕获的ReferenceError：未定义导出在typescript.js：4

我相关的gulpfile代码如下：

const plugins = gulpLoadPlugins();
const tsProject = plugins.typescript.createProject({
  // module: "AMD",
  // outFile: "typescript.js"
});

gulp.task('typescript', () => {
  return gulp.src('app/scripts/**/*.ts')
    .pipe(plugins.plumber())
    .pipe(tsProject())
    .pipe(gulp.dest('app/scripts'))
    .pipe(reload({stream: true}));
});

gulp.task('scripts', () => {
  return gulp.src(['app/scripts/**/*.js'])
    .pipe(plugins.plumber())
    .pipe(plugins.if(dev, plugins.sourcemaps.init()))
    .pipe(plugins.concat('main.js'))
    .pipe(plugins.babel())
    .pipe(plugins.if(dev, plugins.sourcemaps.write('.')))
    .pipe(gulp.dest('.tmp/scripts'))
    .pipe(reload({stream: true}));
});

gulp.task('serve', () => {
  runSequence(['clean', 'wiredep'], 'typescript', ['styles', 'scripts', 'fonts'], () => {
    browserSync.init({
      notify: false,
      port: 9000,
      server: {
        baseDir: ['.tmp', 'app'],
        routes: {
          '/bower_components': 'bower_components'
        }
      }
    });

    gulp.watch([
      'app/*.html',
      'app/images/**/*',
      '.tmp/fonts/**/*'
    ]).on('change', reload);

    gulp.watch('app/styles/**/*.scss', ['styles']);
    gulp.watch('app/scripts/**/*.ts', ['typescript']);
    gulp.watch('app/scripts/**/*.js', ['scripts']);
    gulp.watch('app/fonts/**/*', ['fonts']);
    gulp.watch('bower.json', ['wiredep', 'fonts']);
  });
});

导入html：

<script type="text/javascript" src="scripts/main.js"></script>

我尝试使用不同的编译器选项（Sytem，AMD，ES6 ...），但没有任何效果，坦率地说，我真的不知道我在做什么xD 我发现我必须先在TS文件中导入jQuery有点烦，因为我已经将CDN导入.html并与Bootstrap一起使用了。我已经阅读了有关SystemJS和RequiereJS的文档，但是所有这些设置真的必要吗，以便我可以在TS文件中使用jQuery？

编辑：我之前没有提到的相关花絮：它像“它应该做的”那样“起作用”，因为我已经通过CDN获得了jQuery，我只想知道如何正确地做到这一点，所以没有。没有任何错误，并知道如果我没有通过CDN的jQuery该怎么做。

希望您能帮助我解决这个问题！干杯！

如何正确处理TypeScript中的模块导入（使用Gulp）

0 个答案: