Question

我打算开发一个组件库并尝试使用打包工具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 = $;

webpack配置箱/ build_by_webpack.js

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

仓/ build_by_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

Answer 1

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

Answer 2

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

<强> Utils.js

If Not IsPostBack
    grdVersions.ActiveSheetView.Columns.Add(3, 3)
End If

<强> ClassA.js

var userAgent = navigator.userAgent;

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

它对我有用

Answer 3

我将全局类添加到此位置，以便可以访问所有模块并按如下方式配置browserify：

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);

输出

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

3 个答案: