2017-03-21 14 views
2

Screen grabjQuery是没有角/的WebPack站点定义

喜:莫非 为什么没有定义jQuery有人请向我解释? 它是vendor.js文件(webpack)的一部分,在vendor.js中有数百次提及,如* jQuery JavaScript Library v2.2.4,因此它肯定会加载。

为什么jquery-ui看不到它,但是我已经在Angular 2中遭受了数周的垃圾处理,这没有任何意义。在过去的一天(1个月前),你确保你在休息之前加载了一个文件并且你被分类。

当然,我可以得到2名家属(UI & jasny)来运行,如果包括在_Layout.shtml“实际” <script>hardrive/bla/jquery.js,但什么如果的WebPack也包括它的供应商档案的地步?

得到一个简单的老

.animation = $({ 
    countNum: from 
}) 

运行的一个更大的问题,我已经2周,现在,它已经工作在angularjs的一部分。 的WebPack文件:

const path = require('path'); 
    const webpack = require('webpack'); 
    const merge = require('webpack-merge'); 
    const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin; 

    module.exports = (env) => { 
     // Configuration in common to both client-side and server-side bundles 
     const isDevBuild = !(env && env.prod); 
     const sharedConfig = { 
      stats: { modules: false }, 
      context: __dirname, 
      resolve: { extensions: [ '.js', '.ts' ] }, 
      output: { 
       filename: '[name].js', 
       publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix 
      }, 
      module: { 
       rules: [ 
        { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] }, 
        { test: /\.html$/, use: 'html-loader?minimize=false' }, 
        { test: /\.css$/, use: ['to-string-loader', 'css-loader'] }, 
        { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }, 

        //{ 
        // test : /\.(png|jpg|jpeg)$/, 
        // include : path.join(__dirname, 'img'), 
        // loader : 'url-loader?limit=25000&name=images/[name].[ext]' 
        //}, 
        //{test: /\.png$/, loader: 'file?name=images/[name].[ext]',}, 
       ] 
      }, 
      plugins: [ 
       new CheckerPlugin(), 
       new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), 
      ] 


     }; 






     // Configuration for client-side bundle suitable for running in browsers 
     const clientBundleOutputDir = './wwwroot/dist'; 
     const clientBundleConfig = merge(sharedConfig, { 
      entry: { 'main-client': './ClientApp/boot-client.ts' }, 
      output: { path: path.join(__dirname, clientBundleOutputDir) }, 
      plugins: [ 
       new webpack.DllReferencePlugin({ 
        context: __dirname, 
        manifest: require('./wwwroot/dist/vendor-manifest.json') 
       }) 
      ].concat(isDevBuild ? [ 
       // Plugins that apply in development builds only 
       new webpack.SourceMapDevToolPlugin({ 
        filename: '[file].map', // Remove this line if you prefer inline source maps 
        moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk 
       }) 
      ] : [ 
       // Plugins that apply in production builds only 
       new webpack.optimize.UglifyJsPlugin() 
      ]) 
     }); 

     // Configuration for server-side (prerendering) bundle suitable for running in Node 
     const serverBundleConfig = merge(sharedConfig, { 
      resolve: { mainFields: ['main'] }, 
      entry: { 'main-server': './ClientApp/boot-server.ts' }, 
      plugins: [ 
       new webpack.DllReferencePlugin({ 
        context: __dirname, 
        manifest: require('./ClientApp/dist/vendor-manifest.json'), 
        sourceType: 'commonjs2', 
        name: './vendor' 
       }) 
      ], 
      output: { 
       libraryTarget: 'commonjs', 
       path: path.join(__dirname, './ClientApp/dist') 
      }, 
      target: 'node', 
      devtool: 'inline-source-map' 
     }); 

     return [clientBundleConfig, serverBundleConfig]; 
    }; 

    const path = require('path'); 
const webpack = require('webpack'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const merge = require('webpack-merge'); 


module.exports = (env) => { 
    const extractCSS = new ExtractTextPlugin('vendor.css'); 

    const isDevBuild = !(env && env.prod); 
    const sharedConfig = { 
     stats: { modules: false }, 
     resolve: { extensions: [ '.js' ] }, 
     module: { 
      rules: [ 
       { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' } 
      ] 
     }, 
     entry: { 
      vendor: [ 
       '@angular/common', 
       '@angular/compiler', 
       '@angular/core', 
       '@angular/http', 
       '@angular/platform-browser', 
       '@angular/platform-browser-dynamic', 
       '@angular/router', 
       '@angular/platform-server', 
       'angular2-universal', 
       'angular2-universal-polyfills', 
       'bootstrap', 
       'bootstrap/dist/css/bootstrap.css', 
       'es6-shim', 
       'es6-promise', 
       'event-source-polyfill', 
       'jquery', 
       'zone.js', 
      ] 
     }, 
     output: { 
      publicPath: '/dist/', 
      filename: '[name].js', 
      library: '[name]_[hash]' 
     }, 
     plugins: [ 
      new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) 
      new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580 
      new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100 
     ] 
    }; 

    const clientBundleConfig = merge(sharedConfig, { 
     output: { path: path.join(__dirname, 'wwwroot', 'dist') }, 
     module: { 
      rules: [ 
       { test: /\.css(\?|$)/, use: extractCSS.extract({ use: 'css-loader' }) }, 
       { test: require.resolve('jquery/jquery'), loader: 'expose?jQuery!expose?$' } 
      ] 
     }, 
     plugins: [ 
      extractCSS, 
      new webpack.DllPlugin({ 
       path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), 
       name: '[name]_[hash]' 
      }) 
     ].concat(isDevBuild ? [] : [ 
      new webpack.optimize.UglifyJsPlugin() 
     ]) 
    }); 

    const serverBundleConfig = merge(sharedConfig, { 
     target: 'node', 
     resolve: { mainFields: ['main'] }, 
     output: { 
      path: path.join(__dirname, 'ClientApp', 'dist'), 
      libraryTarget: 'commonjs2', 
     }, 
     module: { 
      rules: [ { test: /\.css(\?|$)/, use: ['to-string-loader', 'css-loader'] } ] 
     }, 
     entry: { vendor: ['aspnet-prerendering'] }, 
     plugins: [ 
      new webpack.DllPlugin({ 
       path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'), 
       name: '[name]_[hash]' 
      }) 
     ] 
    }); 

    return [clientBundleConfig, serverBundleConfig]; 
} 

回答

2

在的WebPack配置已经使用jQuery的provideplugin这样,如果不使用此

new webpack.ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery" 
     }) 
2

首先,在您的WebPack配置的plugins部分,添加不同供应商的jQuery这样:

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

然后,为了确保所有的模块使用相同的jQuery版本,将其添加到您的配置'小号resolve部分:

resolve: { 
    ... 
    alias: { 
     // Force all modules to use the same jquery version. 
     'jquery': path.join(__dirname, '../node_modules/jquery/src/jquery') 
    } 
} 
+0

是啊得到​​了 '插件:[ 新CheckerPlugin(), 新webpack.ProvidePlugin({$: 'jQuery的',jQuery的: 'jQuery的'}), ]' – user964787

1

我通过添加 <script src="~/lib/jquery/dist/jquery.js"></script> 到index.cshtml固定它。

所以,现在我有完整的jquery加载TWICE vendor.js和index.cshtml。

可笑。

如果做这样的事情,所有这些角度简化和代码缩小的点是不可避免的,以获得一个简单的360图像旋转。

+0

哈哈,是的,我明白你的意思伴侣......这只是我们正在教真正的智能设备来做真正愚蠢的事情...... –