来自其他类的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; 

我希望现在有所帮助。