2
Ich habe versucht, ein jquery-Plugin über Webpack zu laden. Dieses Plugin ist als npm-Modul gepackt und in seinen Abhängigkeiten enthält nur jquery. Ich denke, Webpack lädt diese Instanz von Jquery, statt die, die ich global mit ProvidePlugin zur Verfügung stelle. Ich habe versucht, alle Lösungen in einem anderen Stackoverflow Post (Managing jQuery plugin dependency in webpack) zur Verfügung gestellt, aber sie haben den Trick nicht gemacht; Das Ergebnis ist immer das gleiche: "terminal() ist keine Funktion". Wenn ich das Paket manuell im Ordner node_modules ändere, lösche ich die jquery-Abhängigkeit in der package.json und die heruntergeladene Abhängigkeit im Plugin-Ordner node_modules. Webpack bindet das Plugin erfolgreich an die globale Instanz von jquery. Ich weiß, ich könnte einfach eine Gabel dieses Pakets machen und ein privates npm-Repository verwenden, aber ich möchte das offizielle Paket verwenden.webpack jquery plugin Laden einer eigenen Instanz von jquery
, die Konfiguration mein webpack ist:
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var moment = require('moment');
var path = require('path');
var environment = process.env.APP_ENVIRONMENT || 'dev';
module.exports = {
entry: {
'app': './src/main.ts',
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts'
},
/*devtool: 'source-map',*/
output: {
path: './dist',
filename: '[name].browser.' + moment().format('DDMMYYYYHHmm') + '.js'
},
module: {
loaders: [
{ test: /\.component.ts$/, loader: 'ts!angular2-template' },
{ test: /\.ts$/, exclude: /\.component.ts$/, loader: 'ts' },
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.css$/, include: path.resolve('src/app'), loader: 'raw-loader' },
{
test: /\.css$/, exclude: path.resolve('src/app'), loader: ExtractTextPlugin.extract('style', 'css', {
fallbackLoader: "style-loader",
loader: "css-loader"
})
},
{ test: /\.(png|jpe?g|gif|ico)$/, loader: 'file?name=fonts/[name].[ext]' },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream&name=fonts/[name].[ext]" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file?name=fonts/[name].[ext]" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml&name=fonts/[name].[ext]" },
]
},
resolve: {
extensions: ['', '.js', '.ts', '.html', '.css']
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor', 'polyfills']
}),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new webpack.DefinePlugin({
app: {
environment: JSON.stringify(environment),
config: JSON.stringify(require('./profile/' + environment + ".profile.js"))
}
}),
new CleanWebpackPlugin(
['dist']
),
new CopyWebpackPlugin([
{ from: './src/images', to: 'images' }
]),
new ExtractTextPlugin('[name].browser.css'),
new webpack.optimize.UglifyJsPlugin({ minimize: true }),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
};Hier ist die jquery.terminal package.json:
{
"_args": [
[
{
"raw": "[email protected]",
"scope": null,
"escapedName": "jquery.terminal",
"name": "jquery.terminal",
"rawSpec": "0.11.11",
"spec": "0.11.11",
"type": "version"
},
"/home/giovanni/Projects/Private/site"
]
],
"_from": "[email protected]",
"_id": "[email protected]",
"_inCache": true,
"_installable": true,
"_location": "/jquery.terminal",
"_nodeVersion": "4.2.6",
"_npmOperationalInternal": {
"host": "packages-16-east.internal.npmjs.com",
"tmp": "tmp/jquery.terminal-0.11.11.tgz_1475868856610_0.3736777463927865"
},
"_npmUser": {
"name": "jcubic",
"email": "[email protected]"
},
"_npmVersion": "3.5.2",
"_phantomChildren": {},
"_requested": {
"raw": "[email protected]",
"scope": null,
"escapedName": "jquery.terminal",
"name": "jquery.terminal",
"rawSpec": "0.11.11",
"spec": "0.11.11",
"type": "version"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/jquery.terminal/-/jquery.terminal-0.11.11.tgz",
"_shasum": "eaeed2f8f305ac0477d71ef492e7d98d6064d812",
"_shrinkwrap": null,
"_spec": "[email protected]",
"_where": "/home/giovanni/Projects/Private/site",
"author": {
"name": "Jakub Jankiewicz",
"email": "[email protected]",
"url": "http://jakub.jankiewi.cz"
},
"bugs": {
"url": "https://github.com/jcubic/jquery.terminal/issues"
},
"dependencies": {
"jquery": "^2.1.4"
},
"description": "jQuery Terminal Emulator is a plugin for creating command line interpreters in your applications.",
"devDependencies": {
"istanbul": "^0.4.3",
"jasmine": "^2.4.1",
"jasmine-node": "^1.14.5",
"jsdom": "^3.1.2"
},
"directories": {},
"dist": {
"shasum": "eaeed2f8f305ac0477d71ef492e7d98d6064d812",
"tarball": "https://registry.npmjs.org/jquery.terminal/-/jquery.terminal-0.11.11.tgz"
},
"gitHead": "0f2e55a6501d96aa17d42e4fcc071fab906309d8",
"homepage": "http://terminal.jcubic.pl",
"keywords": [
"terminal",
"emulator",
"prompt",
"console",
"keyboard",
"type",
"rpc",
"input",
"ui"
],
"license": "MIT",
"main": "js/jquery.terminal-0.11.11.js",
"maintainers": [
{
"name": "jcubic",
"email": "[email protected]"
}
],
"name": "jquery.terminal",
"optionalDependencies": {},
"readme": "ERROR: No README data found!",
"repository": {
"type": "git",
"url": "git+https://github.com/jcubic/jquery.terminal.git"
},
"scripts": {},
"version": "0.11.11"
}
Danke für die Antwort @Quotidian, ich habe nur wenn das Problem gelöst !. Ich bin dabei, eine Antwort zu posten. –