他のクラスの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; 
    } 
} 

をし、私がこの機能にアクセスしたい：私は持っている これらのクラスはwebpackedさ

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

は、ここでの設定です：

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の両方の部分として改善するためにできることはたくさんあるようですが、私はその質問に集中しようとします。

それは辞書的に内部スコープですので、あなたが関数のメンバーとして getResponsiveBreakpointを定義し

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. 。そうすれば、外部からはアクセスできない。最も簡単な方法は、私はあなたが達成したい内容に応じて

上記のコードで行ったように、それはオブジェクトに変換することでした、あなたもそのような機能の静的メンバーにすることができます：

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; 

を

私は今のところ助けてくれることを願っています。