如何在 browserify 中使用排除?
how to use the exclude in browserify?
在 browserify-handbook 中,exclude part,它给出了一个使用排除的例子:
$ npm install jquery
$ browserify -r jquery --standalone jquery > jquery-bundle.js
然后我们只想在 main.js 中要求 ('jquery'):
var $ = require('jquery');
$(window).click(function () { document.body.bgColor = 'red' });
遵从 jquery dist 包,这样我们就可以写:
<script src="jquery-bundle.js"></script>
<script src="bundle.js"></script>
并且没有 jquery 定义出现在 bundle.js 中,然后在编译 main.js 时,您可以 --exclude jquery:
browserify main.js --exclude jquery > bundle.js
但是当我尝试 运行 这个样本时,我得到了 "Uncaught Error: Cannot find module 'jquery'"
的错误
我知道如果我使用独立的,我可以只使用 'jquery' 作为全局变量,但它不是模块化的,所以我仍然想像示例一样使用 "require('jquery')",那么,我该怎么做才能实现呢?
我终于使用在此处找到的信息实现了此功能:
https://truongtx.me/2014/03/20/browserify-bring-nodejs-modules-to-browser/
我想知道您找到的文档现在是否已过时...
上面link中的工作解决方案使用“-x”选项('external')而不是“-u”选项('exclude')
linked 文章还演示了如何使用 gulp 进行设置。
我正在从上面的 linked 网站粘贴相关内容:
$ browserify -r foo.js > foo-out.js
$ browserify -r d3-browserify > d3-browserify-out.js
对于main.js
$ browserify -x ./foo.js -x d3-browserify main.js > main-bundle.js
在浏览器中,您需要包含所有这 3 个文件
<script src="foo-out.js"></script>
<script src="d3-browserify-out.js"></script>
<script src="main-bundle.js"></script>
更新: 我发布的 link 似乎没有用,所以我包括我当前的 gulpfile.js。我是 gulp 和 javascript 的新手,所以可能有更好的方法来做这些事情。但是当前的设置基本上可以工作:
var browserify = require('browserify');
var gulp = require('gulp');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var gutil = require('gulp-util');
var del = require('del');
const PATH_OPTS = {
src_dir: './client/js/src/',
main_file_path: './client/js/src/main.js',
output_file_name: 'disco.js',
output_dir: './public/js/',
common_lib_file_name: 'common.js'
};
const LIBS = ['paper', 'jquery', 'tocktimer'];
gulp.task("clientlib", function() {
var bundler = browserify({
debug: false
});
LIBS.forEach(function(lib) {
bundler.require(lib);
});
bundler.bundle()
.pipe(source(PATH_OPTS.common_lib_file_name))
// uglify seems to need a buffered stream...
.pipe(buffer())
.pipe(uglify())
.on('error', gutil.log)
.pipe(gulp.dest(PATH_OPTS.output_dir));
});
gulp.task('client', function () {
var bundler = browserify({
debug: true,
cache: {},
packageCache: {},
fullPaths: true
});
bundler = watchify(bundler);
bundler.on('update', function(){
bundle(bundler);
});
bundler.on('log', function(msg) {
gutil.log(msg);
});
bundler.add(PATH_OPTS.main_file_path);
LIBS.forEach(function(lib) {
bundler.external(require.resolve(lib, { expose: lib }));
});
return bundle(bundler);
});
function bundle(bundler) {
return bundler.bundle()
.pipe(source(PATH_OPTS.output_file_name))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
// Add transformation tasks to the pipeline here.
.pipe(uglify())
.on('error', gutil.log)
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(PATH_OPTS.output_dir));
}
gulp.task('lint', function() {
return gulp.src(PATH_OPTS.src_dir + '*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
gulp.task('clean', function () {
return del([
PATH_OPTS.output_dir + '/*.*'
]);
});
gulp.task('full', ['lint', 'clean', 'clientlib', 'client']);
gulp.task('default', ['lint', 'client']);
在 browserify-handbook 中,exclude part,它给出了一个使用排除的例子:
$ npm install jquery
$ browserify -r jquery --standalone jquery > jquery-bundle.js
然后我们只想在 main.js 中要求 ('jquery'):
var $ = require('jquery');
$(window).click(function () { document.body.bgColor = 'red' });
遵从 jquery dist 包,这样我们就可以写:
<script src="jquery-bundle.js"></script>
<script src="bundle.js"></script>
并且没有 jquery 定义出现在 bundle.js 中,然后在编译 main.js 时,您可以 --exclude jquery:
browserify main.js --exclude jquery > bundle.js
但是当我尝试 运行 这个样本时,我得到了 "Uncaught Error: Cannot find module 'jquery'"
的错误我知道如果我使用独立的,我可以只使用 'jquery' 作为全局变量,但它不是模块化的,所以我仍然想像示例一样使用 "require('jquery')",那么,我该怎么做才能实现呢?
我终于使用在此处找到的信息实现了此功能:
https://truongtx.me/2014/03/20/browserify-bring-nodejs-modules-to-browser/
我想知道您找到的文档现在是否已过时...
上面link中的工作解决方案使用“-x”选项('external')而不是“-u”选项('exclude')
linked 文章还演示了如何使用 gulp 进行设置。
我正在从上面的 linked 网站粘贴相关内容:
$ browserify -r foo.js > foo-out.js
$ browserify -r d3-browserify > d3-browserify-out.js
对于main.js
$ browserify -x ./foo.js -x d3-browserify main.js > main-bundle.js
在浏览器中,您需要包含所有这 3 个文件
<script src="foo-out.js"></script>
<script src="d3-browserify-out.js"></script>
<script src="main-bundle.js"></script>
更新: 我发布的 link 似乎没有用,所以我包括我当前的 gulpfile.js。我是 gulp 和 javascript 的新手,所以可能有更好的方法来做这些事情。但是当前的设置基本上可以工作:
var browserify = require('browserify');
var gulp = require('gulp');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var gutil = require('gulp-util');
var del = require('del');
const PATH_OPTS = {
src_dir: './client/js/src/',
main_file_path: './client/js/src/main.js',
output_file_name: 'disco.js',
output_dir: './public/js/',
common_lib_file_name: 'common.js'
};
const LIBS = ['paper', 'jquery', 'tocktimer'];
gulp.task("clientlib", function() {
var bundler = browserify({
debug: false
});
LIBS.forEach(function(lib) {
bundler.require(lib);
});
bundler.bundle()
.pipe(source(PATH_OPTS.common_lib_file_name))
// uglify seems to need a buffered stream...
.pipe(buffer())
.pipe(uglify())
.on('error', gutil.log)
.pipe(gulp.dest(PATH_OPTS.output_dir));
});
gulp.task('client', function () {
var bundler = browserify({
debug: true,
cache: {},
packageCache: {},
fullPaths: true
});
bundler = watchify(bundler);
bundler.on('update', function(){
bundle(bundler);
});
bundler.on('log', function(msg) {
gutil.log(msg);
});
bundler.add(PATH_OPTS.main_file_path);
LIBS.forEach(function(lib) {
bundler.external(require.resolve(lib, { expose: lib }));
});
return bundle(bundler);
});
function bundle(bundler) {
return bundler.bundle()
.pipe(source(PATH_OPTS.output_file_name))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
// Add transformation tasks to the pipeline here.
.pipe(uglify())
.on('error', gutil.log)
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(PATH_OPTS.output_dir));
}
gulp.task('lint', function() {
return gulp.src(PATH_OPTS.src_dir + '*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
gulp.task('clean', function () {
return del([
PATH_OPTS.output_dir + '/*.*'
]);
});
gulp.task('full', ['lint', 'clean', 'clientlib', 'client']);
gulp.task('default', ['lint', 'client']);