NPM和在angular2打字稿中加載外部庫

Question

我正在NPM中使用Ionic2（Browserify），Typescript。

我試圖了解打字稿如何生成打字稿代碼捆綁以及其中包含的內容。 在某些情況下，我的節點要求文件被引用，而在其他情況下，則沒有。

似乎正在發生的事情是，在某些情況下，例如jquery，我被迫手動添加腳本標簽，而在其他情況下（例如lodash），這些標簽會自動神奇地解決並捆綁在一起？

是什么確定了在打字稿編譯過程中正確引用了哪些內容，以及在該過程之外發生了什么？

我在打字稿中使用：

import * as jQuery from 'jquery'; -需要手動將腳本標簽添加到index.html

import * as _ from 'lodash'; -不需要添加腳本標簽-這是“自動”添加的

參見下圖-已加載某些庫，而其他庫則不是來自node_modules文件夾。

我是否缺少某些東西，或者該用例特定於Ionic平台捆綁銷售？

謝謝

在下面打包Json。

{
  "name": "ionic-conference-app",
  "description": "Ionic Conference App",
  "license": "Apache-2.0",
  "repository": {
    "type": "git",
    "url": ""
  },
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "^2.0.0-rc.2",
    "angular2-jwt": "^0.1.18",
    "angular2-moment": "^0.8.2",
    "breeze-client": "^1.5.10",
    "es6-shim": "0.35.0",
    "fullcalendar": "^3.0.0-beta",
    "ionic-angular": "2.0.0-beta.11",
    "ionic-native": "^1.1.0",
    "ionicons": "3.0.0",
    "jquery": "^3.1.0",
    "lodash": "^4.15.0",
    "moment": "^2.14.1",
    "momentjs": "^1.1.14",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "0.6.12"
  },
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-tslint": "^5.0.0",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "^1.1.0",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^2.0.0",
    "ionic-gulp-tslint": "^1.0.0",
    "run-sequence": "1.1.5",
    "tslint": "^3.10.1",
    "tslint-ionic-rules": "^0.0.3"
  },
  "cordovaPlugins": [
    {
      "locator": "https://github.com/VersoSolutions/CordovaClipboard",
      "id": "com.verso.cordova.clipboard"
    },
    {
      "locator": "https://github.com/apache/cordova-plugin-splashscreen.git",
      "id": "cordova-plugin-splashscreen"
    },
    "cordova-plugin-crosswalk-webview",
    "cordova-plugin-whitelist"
  ],
  "cordovaPlatforms": [
    "android",
    "ios"
  ]
}

標准Ionic2 Gulpfile

var gulp = require('gulp'),
    gulpWatch = require('gulp-watch'),
    del = require('del'),
    runSequence = require('run-sequence'),
    argv = process.argv;


/**
 * Ionic hooks
 * Add ':before' or ':after' to any Ionic project command name to run the specified
 * tasks before or after the command.
 */


gulp.task('serve:before', ['watch']);
gulp.task('emulate:before', ['build']);
gulp.task('deploy:before', ['build']);
gulp.task('build:before', ['build']);

// we want to 'watch' when livereloading
var shouldWatch = argv.indexOf('-l') > -1 || argv.indexOf('--livereload') > -1;
gulp.task('run:before', [shouldWatch ? 'watch' : 'build']);

/**
 * Ionic Gulp tasks, for more information on each see
 * https://github.com/driftyco/ionic-gulp-tasks
 *
 * Using these will allow you to stay up to date if the default Ionic 2 build
 * changes, but you are of course welcome (and encouraged) to customize your
 * build however you see fit.
 */
var buildBrowserify = require('ionic-gulp-browserify-typescript');
var buildSass = require('ionic-gulp-sass-build');
var copyHTML = require('ionic-gulp-html-copy');
var copyFonts = require('ionic-gulp-fonts-copy');
var copyScripts = require('ionic-gulp-scripts-copy');
var tslint = require('ionic-gulp-tslint');

var isRelease = argv.indexOf('--release') > -1;

gulp.task('watch', ['clean'], function(done){
  runSequence(
    ['sass', 'html', 'fonts', 'scripts'],
    function(){
      gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); });
      gulpWatch('app/**/*.html', function(){ gulp.start('html'); });
      buildBrowserify({ watch: true }).on('end', done);
    }
  );
});
gulp.task('build', ['clean'], function(done){
  runSequence(
    ['sass', 'html', 'fonts', 'scripts'],
    function(){
      buildBrowserify({
        minify: isRelease,
        browserifyOptions: {
          debug: !isRelease
        },
        uglifyOptions: {
          mangle: false
        }
      }).on('end', done);
    }
  );
});

gulp.task('sass', buildSass);
gulp.task('html', copyHTML);
gulp.task('fonts', copyFonts);
gulp.task('scripts', copyScripts);
gulp.task('clean', function(){
  return del('www/build');
});
gulp.task('lint', tslint);

Answer 1

該問題最有可能是由於未使用jQuery導入。 在這種情況下，TypeScript 不會發出require調用 -如果沒有require調用，則jquery模塊不會將其放入包中。 相反，您可以使用以下import語法：

import 'jquery';

在此GitHub問題中有關於此TypeScript功能的討論。