來自其他類的Webpack訪問類

Question

我想從其他類的webpacked訪問類功能。 我：

var App = function() { 
    getResponsiveBreakpoint: function(size) { 
     var sizes = { 
      'xs' : 480,  // extra small 
      'sm' : 768,  // small 
      'md' : 992,  // medium 
      'lg' : 1200  // large 
     }; 

     return sizes[size] ? sizes[size] : 0; 
    } 
} 

，我想從使用此功能：

var Layout = function() { 
    var resBreakpointMd = App.getResponsiveBreakpoint('md'); 
} 

這些類webpacked，這裏的配置：

var path     = require('path'), 
     webpack    = require('webpack'), 
     ExtractTextPlugin  = require("extract-text-webpack-plugin"), 
     autoprefixer   = require('autoprefixer'), 
     precss    = require('precss'), 
     ProvidePlugin   = require('webpack/lib/ProvidePlugin'), 
     jsPath    = './js', 
     jsLayoutPath   = './js/layout', 
     cssPath    = './css', 
     cssLayoutPath   = './css/layout', 
     cssThemesPath   = './css/layout/themes'; 

    module.exports = { 
     entry: { 
      login: [jsPath + '/login.js', cssPath + '/login.css'], 
      layout: [jsLayoutPath + '/layout.js', cssLayoutPath + '/layout.css'], 
      custom: cssLayoutPath + '/custom.css', 
      vendor: [ 
       cssPath + '/bootstrap.css', 
       cssPath + '/bootstrap-switch.css', 
       cssPath + '/font-awesome.css', 
       cssPath + '/datatables.bootstrap.css', 
       cssPath + '/datatables.css', 
       cssPath + '/datatables.font-awesome.css', 
       cssPath + '/select2.css', 
       cssPath + '/select2-bootstrap.css', 
       cssPath + '/components.css', 
       cssPath + '/plugins.css', 
       cssPath + '/daterangepicker.css', 
       cssPath + '/uniform.default.css', 
       jsPath + '/jquery.js', 
       jsPath + '/jquery.blockUI.js', 
       jsPath + '/bootstrap.js', 
       jsPath + '/bootstrap-hover-dropdown.js', 
       jsPath + '/bootstrap-switch.js', 
       jsPath + '/select2.full.js', 
       jsPath + '/jquery.waypoints.min.js', 
       jsPath + '/jquery.slimscroll.js', 
       jsPath + '/jquery.counterup.js', 
       jsPath + '/jquery.uniform.js', 
       jsPath + '/jquery.validate.js', 
       jsPath + '/jquery.form.js', 
       jsPath + '/additional-methods.js', 
       jsPath + '/datatables.js', 
       jsPath + '/datatables.bootstrap.js', 
       jsPath + '/app.js' 
      ], 
      respond: jsPath + '/respond.src.js', 
      excanvas: jsPath + '/excanvas.js' 
     }, 
     output: { 
      path: __dirname + "/../../web/assets/js/", publicPath: '/assets/js/', filename: "[name].js" 
     }, 
     module: { 
      loaders: [ 
       { 
        test: /\.css$/, 
        exclude: /node_modules/, 
        loader: ExtractTextPlugin.extract("style-loader", "css-raw-loader!postcss-loader") 
       }, 
       { test: /jquery\.js$/, loader: 'expose?$' }, 
       { test: /jquery\.js$/, loader: 'expose?jQuery' }, 
       { test: /datatables\.js$/, loader: 'expose?DataTable' }, 
       { test: /jquery\.form\.js$/, loader: "imports?define=>false" }, 
       { 
        test: /\.js(x)?$/, 
        exclude: /node_modules/, 
        loader: 'babel', 
        query: { 
         plugins: [ 
          "transform-class-properties" 
         ], 
         "presets": [ 
          "stage-0", 
          "es2015", 
          "react" 
         ], 
         compact: false 
        } 
       }, 
      ], 
      postcss: function() { 
       return [autoprefixer, precss]; 
      } 
     }, 
     plugins: [ 
      new webpack.ProvidePlugin({ 
       $: "jquery", 
       jQuery: "jquery", 
       "window.jQuery": "jquery", 
       "DataTable": "datatables.net" 
      }), 
      new webpack.optimize.UglifyJsPlugin({ 
       compress: { warnings: false }, 
      }), 
      new webpack.optimize.CommonsChunkPlugin("commons", "../js/commons.min.js"), 
      new ExtractTextPlugin("../css/[name].min.css", { 
       allChunks: true 
      }), 
     ] 
    }; 

我怎樣才能做到這一點？我嘗試過使用公開模塊，但從未成功。謝謝！

Answer 1

我會重寫爲答案。作爲Webpack配置的JavaScript的一部分，你可以做很多事情來改進，但我會試着專注於這個問題。

1. 使用模塊

   import App from '../app.js'; 
   
   var Layout = function() { 
       var resBreakpointMd = App.getResponsiveBreakpoint('md'); 
   } 
   

   和

   var App = { 
       getResponsiveBreakpoint: function(size) { 
        var sizes = { 
         'xs' : 480,  // extra small 
         'sm' : 768,  // small 
         'md' : 992,  // medium 
         'lg' : 1200  // large 
        }; 
        return sizes[size] ? sizes[size] : 0; 
       } 
       } 
   
   export default App; 
   

2. 您定義getResponsiveBreakpoint作爲函數的一員，所以它詞法範圍內。這樣它就無法從外部訪問。最簡單的事情是將其轉換爲對象像我一樣在上面的代碼

取決於你想要達到的目標，你也可以把它的功能的靜態成員是這樣：

var App = function() { 
    // some logic here 
} 

App.getResponsiveBreakpoint: function(size) { 
    var sizes = { 
     'xs' : 480,  // extra small 
     'sm' : 768,  // small 
     'md' : 992,  // medium 
     'lg' : 1200  // large 
    }; 
    return sizes[size] ? sizes[size] : 0; 
} 

export default App; 

我希望現在有所幫助。