導入jQuery插件。 Angular 2＆Webpack

這比我預料的更令人沮喪。導入jQuery插件。 Angular 2＆Webpack

我已經想出瞭如何在我的Webpack構建過程中包含諸如jQuery和bootstrap之類的東西。但我添加的第三方角度指令之一需要一個特定的jQuery插件在全局$範圍內可用...對於我的生活，我找不到一個簡單明瞭的例子來說明如何做到這一點。

這是錯誤的代碼，我不斷收到：

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

我已經看到了使用腳本加載程序的例子，暴露裝載機，採用決心用別名集，我已經試過所有......但是我並不是很幸運，因爲我是Webpack的新手，在過去的兩天裏我可能已經把自己弄得比什麼都重要。我想我正在混合不同的解決方案，這可能會加劇混亂。

我已經讀了幾遍這個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';

因此我的問題：

如何在使用Webpack 2模塊加載/構建過程的Angular 2應用程序中加載第三方jQuery插件。

來源

2017-02-20 Rohan Büchner

是不是這種情況下，你可能想尋找一個非jQuery，angular2特定的庫，解決同樣的問題？ – jellymann

@jellymann。是和不是......這個問題涉及到導入第三方庫和它們的依賴關係。即使我能夠通過「只有角度」才能超越這一點。我仍然需要在某個階段弄清楚如何提供/捆綁/提供第三方依賴關係。 –

我已經成功地部分地解決了這個使用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 
    } 
    },

上述允許您任何組件中你在工作中做到這一點：

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

的：

import 'selectize';

那麼這個模板標記爲組件內唯一的問題是如何以類似的方式提供樣式表/將它們自動包含在我的供應商CSS「捆綁包」中。目前我已經複製了這些樣式，但是一旦我找到了答案，就會更新這個答案。

來源

2017-02-20 12:31:21

在我們的senario中，我們有一個外部js文件需要被添加到全局範圍。它不在npm包中，所以我們直接包含它。我們實現了這個如下：

webpack.config.js

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

main.browser.ts

附： main.browser.ts是的WebPack入口點

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

我們必須爲我們所有的資產，如圖像，外部JS等

來源

2017-02-20 11:14:04

導入jQuery插件。 Angular 2＆Webpack

回答

相關問題