Question

我正在使用Ionic2（Browserify），NPM打字稿。

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

似乎正在发生的事情是，在某些情况下，例如jquery我被迫在其他情况下手动添加脚本标记，例如lodash这些是自动神奇地解决并捆绑了吗？

什么是确定什么被正确引用作为打字稿编译过程的一部分以及在流程之外必须发生什么？

在我使用的打字稿中：

import * as jQuery from 'jquery'; - 需要手动将脚本标记添加到index.html

import * as _ from 'lodash'; - 不需要添加脚本标记 - 这是＆＃34;自动＆＃34;加入

请参见下图 - 某些库已加载，其他库不是来自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 won't emit a require call - 并且没有require调用，jquery模块将不会进入捆绑包。相反，您可以使用此import语法：

import 'jquery';

this GitHub issue中有关于此TypeScript功能的讨论。

NPM并在angular2打字稿中加载外部库

1 个答案: