webpackを介してjqueryプラグインをロードしようとしています。このプラグインは npm モジュールとしてパッケージ化されており、その依存関係には jquery のみが含まれています。Webpack は、ProvidePlugin でグローバルに提供するものを使用する代わりに、jquery のインスタンスをロードすると思います。別のstackoverflowの投稿で提供されているすべてのソリューションを試しました（webpackでjQueryプラグインの依存関係を管理する）しかし、彼らはうまくいきませんでした。結果は常に同じです。「terminal() は関数ではありません」。node_modules フォルダー内のパッケージを手動で変更して、package.json 内の jquery 依存関係と node_modules プラグイン フォルダー内のダウンロードされた依存関係を削除すると、webpack はプラグインを jquery のグローバル インスタンスに正常にバインドします。そのパッケージのフォークを作成してプライベート npm リポジトリを使用することもできますが、公式パッケージを使用したいと思います。
それが私のwebpack構成です：
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": "jquery.terminal@0.11.11",
"scope": null,
"escapedName": "jquery.terminal",
"name": "jquery.terminal",
"rawSpec": "0.11.11",
"spec": "0.11.11",
"type": "version"
},
"/home/giovanni/Projects/Private/site"
]
],
"_from": "jquery.terminal@0.11.11",
"_id": "jquery.terminal@0.11.11",
"_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": "jcubic@onet.pl"
},
"_npmVersion": "3.5.2",
"_phantomChildren": {},
"_requested": {
"raw": "jquery.terminal@0.11.11",
"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": "jquery.terminal@0.11.11",
"_where": "/home/giovanni/Projects/Private/site",
"author": {
"name": "Jakub Jankiewicz",
"email": "jcubic@onet.pl",
"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": "jcubic@onet.pl"
}
],
"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"
}