Импорт плагина jQuery. Angular 2 & Webpack

Question

Это оказалось более неприятным, чем я ожидал.

Я выяснил, как включить в процесс создания Webpack такие вещи, как jQuery и bootstrap. Но одна из сторонних угловых директив, которые я добавил, требует наличия специального плагина jQuery в глобальной области $ ... для жизни меня я не могу найти простой ясный пример того, как это сделать.

Это код ошибки я получаю:

Error: Error in ./SomeComponent class SomeComponent - inline template:5:32 caused by: $(...).selectize is not a function

Я видел примеры использования сценариев-загрузчик, разоблачить-загрузчик, используя решительность с набором псевдонимов, я пытался их всех ... но мне кажется, что мне не очень повезло, поскольку я новичок в Webpack, и мне, вероятно, удалось заблудиться больше всего за последние 2 дня. Я думаю, что я смешиваю различные решения, которые могут добавить к хаосу.

Я читал это post несколько раз, и он объясняет, как загрузить, сам jQuery ... но не плагин jQuery.

(некоторые кода исключены для краткости)

webpack.config.js

module.exports = { 
    module: { 
    loaders: [ 
     { 
     test: /bootstrap-sass[\/\\]assets[\/\\]javascripts[\/\\]/, 
     use: 'imports-loader?jQuery=jquery' 
     }, 
     { 
     test: require.resolve('selectize'), 
     use: 'expose-loader?$!expose?selectize' 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jquery: "jquery", 
     "window.jQuery": "jquery", 
     jQuery:"jquery" 
    }), 
    resolve: { 
    alias: { 
     'selectize': path.resolve(
     __dirname, 
     '../selectize/dist/js/selectize.min.js' 
    ) 
    }, 
    extensions: [ 
     '.webpack.js', 
     '.web.js', 
     '.js', 
     '.ts' 
    ] 
    }, 
    entry: { 
    vendor: [ 
     .. 
    ], 
    main: `./${conf.path.src('index')}` 
    } 
}; 

app.ts

import 'script-loader!selectize'; 

Таким образом, мой вопрос:

Как загрузить сторонний плагин jQuery в приложении Angular 2 с использованием процесса загрузки/сборки модуля Webpack 2.

Answer 1

мне удалось частично решить это с помощью alias

Webpack. конфигурации.JS

resolve: { 
    alias: { 
     selectize$: path.join(__dirname, '../node_modules/selectize'), 
     // this can also be a path to an actual js file if you so choose 
    } 
    }, 

выше позволяет сделать это в зависимости от того компонента вы работаете в:

import 'selectize'; 

тогда этого в вашем шаблоне разметки для компонента:

<ng-selectize [config]="config" [options]="options"></ng-selectize> 

единственная проблема, которую я все еще имею, - это то, как обслуживать таблицы стилей в стиле similair/включать их в комплект разработчика CSS «автоматически». Пока я копировал стили, но буду обновлять этот ответ, как только выясню это.

Answer 2

В нашем senario у нас был внешний js-файл, который необходимо было добавить в глобальную область. Это не было в пакете npm, поэтому мы просто включили его напрямую. Мы достигли этого следующим образом:

webpack.config.js

plugins: [ 
    ... 
    new ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery" 
    }), 
    ... 
] 

main.browser.ts

P.S. main.browser.ts является WebPack EntryPoint

require('expose?$!expose?jQuery!jquery'); 
require('../path_to_asset/selectize/dist/js/selectize.min.js'); 

Мы имеем конкретную папку для всех наших активов, таких как изображения, внешние JS и т.д.