2017-08-22 92 views
1

我對webpack非常陌生,我注意到的第一件事之一是我可以將jquery包裝在下面,所以它的全局可用於我的JavaScript,這是可愛的。我想用其他我喜歡的時刻,會計和我需要使用的插件(例如jQuery UI)來使用它。Webpack ProvidePlugin和全局變量

天真和其上的WebPack不讀正確,我只是嘗試以下,但它似乎並沒有工作:

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    entry: './src/js/config.js', 
    output: { 
     path: path.resolve(__dirname, 'public/js'), 
     filename: 'main.build.js' 
    }, 
    plugins: [ 
     new webpack.ProvidePlugin({ 
      $: 'jquery', 
      accounting: 'accounting', 
      moment: 'moment' 
      // jQuery: './src/vendor/jquery/dist/jquery.min', 
      // jqueryui : './src/vendor/jquery-ui/jquery-ui.min', 
      // listjs: './src/vendor/list.js/dist/list.min', 
      // moment: './src/vendor/moment/min/moment.min', 
      // nouislider: './src/vendor/nouislider/distribute/nouislider.min', 
      // accounting: './src/js/plugins/accounting', 
      // imagesLoaded: './src/vendor/imagesloaded/imagesloaded.pkgd.min', 
      // parsley: './src/vendor/parsleyjs/dist/parsley.min', 
      // urlQuery: './src/vendor/domurl/url.min' 
     }), 
     new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /js$/) 
    ], 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       loader: "babel-loader", 
       query: { 
        presets: [ "babel-preset-es2015" ].map(require.resolve) 
       } 
      } 
     ] 
    }, 
    stats: { 
     colors: true 
    }, 
    devtool: 'source-map' 
}; 

這是我的總的囂張氣焰,但真的希望有人能爲幫助如果能夠在全球範圍內使用這些東西並且不必將其導入到某些文件中,我真的很高興,我試圖將整個前端js堆棧轉換爲es6模塊。

在此先感謝!

+0

通過NPM安裝後,這實際上現在有效,但在瀏覽器中,我得到'未捕獲的TypeError:無法設置未定義的屬性'時刻' - 真的很感謝任何幫助! – Jamie

回答

1

經過一段時間的擺弄之後,實際上工作正常。一旦通過npm安裝,這很棒。

+0

重要的是要注意,你需要通過npm安裝它(它應該駐留在你的'node_modules'中),並且有適當的情況'moment:'moment'' –