从其他类访问 Webpack 类
Webpack access class from other class
我正在尝试从其他网络打包的类访问类函数。我有:
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');
}
这些类是网络打包的,下面是配置:
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
}),
]
};
我怎样才能做到这一点?我尝试使用暴露模块,但从未成功。谢谢!
我将重写为答案。作为 JavaScript 和 Webpack 配置的一部分,您似乎可以做很多事情来改进,但我会尝试专注于这个问题。
-
使用模块
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;
-
您将
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;
我希望现在有所帮助。
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 如何使用url加载程序在webpack中导入多个图像
- Javascript,访问一个主要对象模块模式中的每个对象
- 如何访问声音管理器2创建的声音对象
- 在Twitter上用ie9中的空白src访问iframe的contentWindow
- Webpack/Rect:遵循egghead.io教程,但出现错误:您可能需要一个合适的加载程序来处理此文件类型
- Webpack开发服务器和React服务器端渲染
- JavaScript Pub/Sub属性访问问题
- 从JavaScript访问struts操作中的属性
- 是否可以从父类访问子类的属性
- 如何访问fastOpt.js
- 访问JSON对象内部的数组元素
- 从模块内部访问Express装载路径
- 难以访问的JS环境中的语法错误
- 如何从浏览器开发工具访问 Webpack 模块
- WebPack:访问客户端代码中的节点环境变量
- 如何从外部访问webpack bundle(js)中的mobx对象
- Webpack主javascript文件's函数不能在加载在页脚的js文件中访问
- 使用webpack时,谷歌地图无法访问回调功能
- 从其他类访问 Webpack 类