jquery - 如何在 ionic 2 Angular 应用程序中包含 jQuery

Question

我正在创建一个 ionic 2 应用程序。我是一名新的 Angular 2 开发人员，如果我错过了一些东西，我很抱歉。我想将 jQuery 和其他 js 文件包含到页面组件中。

我使用了这个方法:

import { Component } from '@angular/core';
import '../../assets/js/jquery-2.1.1.js';
import '../../assets/js/prog-bar.js';
import '../../assets/js/myApp.js';
import { NavController } from 'ionic-angular';

好吧，它加载了文件，但给了我错误

Uncaught ReferenceError: $ is not defined.

所以我尝试包含 jquery lib:

npm install @types/jquery --save-dev

但我不知道下一步该做什么。如何在我的应用程序中以良好的方式使用 Jquery lib，请不要告诉我将脚本标记添加到index.html 页面，因为每次我重新运行应用程序时它都会被删除。

Answer 1

import $ from 'jquery';

如果你这样做了，上面的方法应该可以工作:

System.config({
defaultJSExtensions: true,
paths: {
    // paths serve as alias
    'npm:': 'node_modules/'
},
map: {
    'app':  'app',
    jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js',
    material: 'npm:material-design-lite/dist/material.min.js',

    // angular bundles
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    ....
},
packages: {
    app: { main: 'main', format: 'register', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' }
},
});

另外，不要忘记您应该有一个typings.json 指向您的jquery 类型文件。

请注意，如果您找不到 system.config.js 文件，请查找要更改的 webpack 文件。如果您找到了，webpack.config.js只需将其添加到其中:

插件:[
新的 webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
]