2016-10-18 8 views
2

webpackを通じてjqueryプラグインをロードしようとしました。 このプラグインはnpmモジュールとしてパッケージ化されており、依存関係にはjqueryのみが含まれています。 Webpackは、私がグローバルにProvidePluginを提供する代わりにjqueryのインスタンスをロードすると思います。 別のstackoverflowポスト(Managing jQuery plugin dependency in webpack)で提供されているすべてのソリューションを試しましたが、そのトリックは行いませんでした。結果は常に同じです: "terminal()は関数ではありません"。 node_modulesフォルダ内のパッケージを手動で変更すると、package.json内のjquery依存関係とnode_modulesプラグインフォルダ内のダウンロードされた依存関係を削除すると、webpackはプラグインをjqueryのグローバルインスタンスに正常にバインドします。 私は単純にそのパッケージをフォークし、プライベートのnpmリポジトリを使用することができますが、私は公式のパッケージを使いたいと思います。ここでwebpack jqueryプラグイン独自のjqueryインスタンスをロードしています

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" 
 
    }) 
 
    ] 
 
};

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" 
 
}

答えて

0

ないFAM私WebPACKの構成だ

jquery.terminalに慣れていますが、プラグインに明示的にjQueryをロードする方法を教えてください。私は同様の問題のためにいくつかのプラグインでこれをしなければなりませんでした。

loaders: [{ 
     test: /jquery.terminal.+\.(js)$/, 
     loader: 'imports?jQuery=jquery,$=jquery,this=>window' 
    }] 
+0

おかげで、私はちょうどかかわらず、問題を解決しました! 私は答えを投稿しようとしています。 –

4

Webpackの設定を少し変更して問題を解決しました。 ここに示唆したように(Managing jQuery plugin dependency in webpack)、jqueryエイリアスを追加しました。 提供されている例では、エイリアスが静的に指定されていて、それは私のためには機能しませんでした。 私は動的な値に切り替えて、問題を解決しました。

ここでは抜粋です:返信@Quotidianため

alias: { 
 
     'jquery': path.resolve(path.join(__dirname, 'node_modules', 'jquery')) 
 
    },

+0

これは私を助けたものです。私は 'jquery/src/jquery'をエイリアスとして使っていましたが、古いjqueryプラグインは' package.json'に依存していませんでした。例えば、プラグインが依存関係としてjQueryを持っている場合、 'some-jquery-plugin/node_modules/jquery/src/jquery'です。 'jquery/src/jquery'をエイリアスとして使用すると、私のvendor.jsには2つの異なるバージョンのjQueryがありました。古いjQueryプラグインはjQuery 1.0.0の後に何かが必要で、yarn/npmはjQuery 3をダウンロードしました。 1.12.4 – Sams

関連する問題