Javascript 来自其他类的网页包访问类

我正在尝试访问其他类中的类函数，这些类都是网页包。 我有：

我想从以下位置访问此功能：

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
            }),
        ]
    };

---

我怎样才能做到这一点？我尝试使用expose模块，但从未成功。谢谢

我将重写作为答案。作为JavaScript和Webpack配置的一部分，您似乎可以做很多事情来改进，但我将试着把重点放在这个问题上

使用模块

import App from '../app.js';

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

及

您将

getResponsiveBreakpoint

定义为函数的一个成员，因此它在词汇范围内。那样的话，从外面是无法到达的。最简单的方法是像我在上面的代码中所做的那样将其转换为object

根据您想要实现的功能，您还可以将其作为函数的静态成员：

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;

---

我希望现在能有所帮助

您是否尝试从包含布局的文件中从“/path/to/App”导入应用程序？如果您不使用ES6（导入），您可以使用

var-App=require（'./path/to/App/'）

感谢您的回复，我尝试添加：var

App=require（'./js/App.js'）

在

layout.js

的顶部，我得到了错误的layout.js module not found，当我添加内部布局函数时，我得到了app.js module not found我想你的路径可能不正确。它应该是相对于layout.js的。可能是

var-App=require（'../App.js'）？现在我得到了
I.getResponsiveBreakpoint不是一个函数
，当我得到空对象时，你需要从App.js导出App。如果您使用的是ES6，那么在App.js的底部，您可以编写
导出默认应用程序
。看起来您正在使用ES6，因此最好使用导入和导出。
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;

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;