NPM和在angular2 typescript中加载外部库

我正在使用带有NPM的Ionic2（Browserify）类型脚本

我试图理解typescript是如何生成typescript代码包的，以及其中包含的内容。在某些情况下，会引用“我的节点要求”文件，而在其他情况下则不会

似乎正在发生的是，在某些情况下，例如jquery，我被迫手动添加脚本标记，而在其他情况下，如lodash，这些脚本标记会自动神奇地解析并绑定

什么决定了typescript编译过程中正确引用了什么，以及在过程之外必须发生什么

在typescript中，我使用的是：

import*作为jQuery从“jQuery”导入--需要手动将脚本标记添加到index.html

从“lodash”导入*as uuu--不需要添加脚本标记-这是“自动”添加的

请参见下图-某些库已加载，而其他库不是从node_modules文件夹加载的


我是否遗漏了什么，或者这个用例是特定于离子平台捆绑的

谢谢

下面的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);

问题很可能是由于未使用
jQuery
导入。在这种情况下，TypeScript-如果没有
require
调用，
jquery
模块将无法进入捆绑包。相反，您可以使用以下
import
语法：

import 'jquery';

在中有关于此TypeScript功能的讨论。
通常，导入将解析为
节点中的模块
，并且它们将包含在捆绑包中。Ionic2在browserify和webpack之间来回切换。对于您正在使用的Ionic2版本（cli、模块等），您需要非常具体。如果不知道版本，很难说。我想我的问题是这是一个类型脚本/节点问题还是一个浏览/网页问题？我会说是后者。由于目前正在发生大量的更改，很难准确地确定为您的项目配置了什么。包括您的
包。json
和
gulpfile
可能有用。@cartant补充道-gulp文件的问题是它只会涉及其他依赖项。我的直觉是它与节点模块解析有关，但我不确定问题出在哪里，是Typescript找不到模块或其中一个打包程序。是的，我知道；很多配置都隐藏在离子模块中。要澄清的是，您已经有了工作，但是对于为什么需要包括一些脚本，您感到好奇，对吗？天晚了，在这里；明天我将快速查看配置。browserify/tsify配置中没有什么不寻常的地方，因此我在回答中提到的场景对我来说是唯一有意义的。这是正确的答案，在我将其放入后捆绑似乎正常工作-奇怪且出乎意料。就是这样。。。jQuery在我的组件中导入，但仅在第三方JS库中使用。因此，JS包中没有生成导入，并且不包括jQuery。添加类似$（“”）的内容；在测试代码中，jQuery包含在最后一个包中。提供jQuery示例的每个人。如果我们加载其他类似js的主题有多个js文件，并且它在每个路由更新中都不起作用，该怎么办。每次我们都需要刷新页面来加载jsfiles@Rahul_Dabhi与其在评论中问一个问题，不如问一个新问题——如果你认为需要的话，可以参考这个问题。