2
我一直在試圖通過webpack加載jquery插件。 這個插件被打包爲一個npm模塊，並且在它的依賴項中只包含jquery。 我想webpack會加載jquery的實例，而不是使用全局提供的ProvidePlugin。 我嘗試了另一個stackoverflow帖子中提供的所有解決方案（Managing jQuery plugin dependency in webpack），但他們沒有製造竅門;結果總是相同的：「terminal（）不是函數」。 如果我手動修改node_modules文件夾中的軟件包，刪除package.json中的jquery依賴項，並在node_modules插件文件夾webpack中下載的依賴項成功地將該插件與jquery的全局實例綁定。 我知道，我可以簡單地製作一個包的分支並使用私有npm存儲庫，但我想使用官方軟件包。webpack jquery插件加載自己的jQuery實例
這是我的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": "[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"
}
感謝@Quotidian，我剛纔已經解決了這個問題，雖然的答覆！ 我即將發佈答案。 –