Javascript 如何使用webpack或browserify处理公共变量和函数_Javascript_Browserify_Webpack

Javascript 如何使用webpack或browserify处理公共变量和函数

javascript webpack

Javascript 如何使用webpack或browserify处理公共变量和函数,javascript,browserify,webpack,Javascript,Browserify,Webpack,我打算开发一个组件库，并尝试使用打包工具JS实现模块化，每个模块可能会使用一些公共变量和函数，例如以下变量，在每个模块中可能会使用，不知道如何在browserify或webpack中配置项目结构 src/Utils.js-公共函数 //public variable var userAgent = navigator.userAgent; var isWebkit = /webkit|khtml/i.test(userAgent); //global.isWebkit = isWebkit

我打算开发一个组件库，并尝试使用打包工具JS实现模块化，每个模块可能会使用一些公共变量和函数，例如以下变量，在每个模块中可能会使用，不知道如何在browserify或webpack中配置

项目结构

src/Utils.js-公共函数

//public variable
var userAgent = navigator.userAgent;
var isWebkit = /webkit|khtml/i.test(userAgent);

//global.isWebkit = isWebkit;//not suitable for entry to the global, window pollution

src/core/ClassA.js-模块A

document.write('isWebkit - ' + isWebkit); //module class need access to public variables and functions
function ClassA(options){
    if(isWebkit){

    }
}
module.exports = ClassA;

src/Index.js-条目类

'use strict';

require('./Utils');

var $ = {
    version: '0.1'
};

$.A = require('./core/ClassA');

module.exports = $;

网页包配置 bin/build_by_webpack.js

var webpack = require("webpack");
webpack({
    entry: {
        'Q': "../src",
    },
    output: {
        path: '../',
        filename: "[name].bundle.js",
        library: 'Q',
    }
}, function (err, stats) {
});

bin/build\u by\u browserify.js

var browserify = require('browserify');
var fs = require('fs');

var options = {
    entries: ['../src'],
    standalone: 'Q',
}
var b = browserify(options);
b.bundle().pipe(fs.createWriteStream('../Q.bundle.js'));

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="Q.bundle.js"></script>
</head>
<body>

</body>
</html>


标题

Q.bundle.js

只需在ClassA中导入您的Utils.js即可使用它

我理解正确，我的意思是要求使用ClassA中的Utils，而不是索引中的Utils：

Utils.js

var userAgent = navigator.userAgent;

module.exports = {
    isWebkit: /webkit|khtml/i.test(userAgent)
}

var isWebkit = require('../Utils').isWebkit;

document.write('isWebkit - ' + isWebkit); 
function ClassA(options){
    if(isWebkit){
        // do some crazy stuff
    }
}
module.exports = ClassA;

ClassA.js

var userAgent = navigator.userAgent;

module.exports = {
    isWebkit: /webkit|khtml/i.test(userAgent)
}

var isWebkit = require('../Utils').isWebkit;

document.write('isWebkit - ' + isWebkit); 
function ClassA(options){
    if(isWebkit){
        // do some crazy stuff
    }
}
module.exports = ClassA;

它适用于我

我将向该位置添加全局类，以便可以访问所有模块并按如下方式进行浏览配置：

var browserify = require('browserify');
var fs = require('fs');
var UglifyJS = require("uglify-js");
var stream = require('stream');
var util = require('util');

function StringStream() {
    stream.Stream.call(this);
    this.writable = true;
    this.buffer = "";
};
util.inherits(StringStream, stream.Stream);

StringStream.prototype.write = function(data) {
    if (data && data.length)
        this.buffer += data.toString();
};

StringStream.prototype.end = function(data) {
    this.write(data);
    this.emit('end');
};

StringStream.prototype.toString = function() {
    return this.buffer;
};

var s = new StringStream();
s.on('end', function() {
    onfinish(this.toString());
});


var fileName = '../Q.bundle.js';
var minFileName = '../Q.bundle.min.js';
var globalName = '../src/Utils.js';

function onfinish(str){
    var index = str.indexOf('var define,module,exports;');
    var str1 = str.substring(0, index);
    var str2 = str.substring(index);

    var globalJS = fs.readFileSync(globalName, 'utf8');

    var string = str1 + '\n' + globalJS + '\n' + str2;
    fs.writeFile(fileName, string);

    var result = UglifyJS.minify(string, {
        fromString : true
    });
    fs.writeFile(minFileName, result.code);
}

var options = {
    entries: ['../src'],
    standalone: 'Q',
}
var b = browserify(options);

b.bundle().pipe(s);

输出

只需要（'Utils'）？对在ClassA.js文件的开头，然后在类中使用它。您可能误解了我的意思，我想创建一个类库，您可以尝试我的测试程序。作为一个要加载的模块，我知道，这与普通模块加载没有区别，但我希望直接全局访问