如果我有一个从cdn下拉的库并且不希望它成为最终js文件的一部分但是能够使用browserify要求它,我该如何解决它？
以下是我目前使用alias和shim文件解决它的方法.
browserify: {
options: {
debug: true,
transform: [ 'reactify' ],
alias: [
'client/shims/jquery.js:jquery'
]
},
app: {
src: 'client/app.js',
dest: 'public/app.js'
}
}
这是client/shims/jquery.js我所说的shim文件,jquery所以我可以使用require('jquery')而不是完整路径.
module.exports = $;
grunt-browserify中是否有一个快捷方式来支持这种情况？我想知道是否可以在Gruntfile.js中定义它而不创建shim文件.
添加external: [ 'jquery' ]似乎完全忽略它并且不起作用.
我正在使用SpineJS(它导出一个commonjs模块)并且它需要全局可用,因为我在任何地方都使用它,但似乎我必须Spine = require('spine')对每个使用Spine的文件进行操作.
有没有什么方法可以定义Spine一次以使其全球可用？
PS:我使用Spine作为例子,但我一般都想知道如何与其他任何库一起使用.
我通过NPM安装了React js并使用browserify来管理react中的组件.当React发生异常时,控制台显示为
"未捕获的错误:发生了缩小的异常;使用非缩小的开发环境获取完整的错误消息和其他有用的警告."
如何启用完整的错误消息？
我正在尝试编写一个gulp任务,允许我在JS中使用模块(CommonJS很好),使用browserify + 6to5.我也希望源映射能够工作.
所以:1.我使用ES6语法编写模块.2. 6to5将这些模块转换为CommonJS(或其他)语法.3. Browserify捆绑模块.4.源映射返回原始ES6文件.
怎么写这样的任务？
编辑:这是我到目前为止所拥有的:
吞咽任务
gulp.task('browserify', function() {
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var to5ify = require('6to5ify');
browserify({
debug: true
})
.transform(to5ify)
.require('./app/webroot/js/modules/main.js', {
entry: true
})
.bundle()
.on('error', function(err) {
console.log('Error: ' + err.message);
})
.pipe(source('bundle.js'))
.pipe(gulp.dest(destJs));
});
模块/ A.js
function foo() {
console.log('Hello World');
let x = 10;
console.log('x is', x);
}
export {
foo
};
模块/ B.js
import {
foo
}
from './A';
function bar() {
foo();
}
export { …我Babelify和Browserify一起工作.此外,我正在使用节点模块系统的ES6样式模块功能.
我想把所有自己的模块都放进去node_modules/libs.
例如:
test.js 在 node_modules/libs
export default () => {
console.log('Hello');
};
main.js(将编译为bundle.js)
import test from 'libs/test';
test();
之后,我bundle.js用以下命令编译了上面的代码:
browserify -t babelify main.js -o bundle.js
但不幸的是,我有一些错误:
export default () => {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
目录结构:
[test]
`-- node_modules
? `-- libs
? `-- test.js
`-- main.js
但是,当自己的模块不是node_modules这样的时候:
[test]
`-- libs
? `-- test.js
`-- main.js
然后,它工作正常.我如何使用ES6风格模块,babelify在 …
我有浏览器捆绑文件,它工作得很好.但是,如果我需要生成多个捆绑包呢？
我想最终dist/appBundle.js和dist/publicBundle.js
gulp.task("js", function(){
return browserify([
"./js/app.js",
"./js/public.js"
])
.bundle()
.pipe(source("bundle.js"))
.pipe(gulp.dest("./dist"));
});
显然这不会起作用,因为我只指定了一个输出(bundle.js).我可以通过重复上面这样的声明来实现这一点(但由于重复,它感觉不对):
gulp.task("js", function(){
browserify([
"./js/app.js"
])
.bundle()
.pipe(source("appBundle.js"))
.pipe(gulp.dest("./dist"));
browserify([
"./js/public.js"
])
.bundle()
.pipe(source("publicBundle.js"))
.pipe(gulp.dest("./dist"));
});
有没有更好的方法来解决这个问题？谢谢!
我想在大型应用程序中异步加载角度依赖项,我试图在Browserify或Webpack之间做出决定.我知道angular 2.0会原生支持这个,但是现在我正在寻找一个支持良好且流行的解决方案.
任何人都可以就角度团队中哪些最有效,以及构建项目的最佳方式提供建议.
我在吞咽中使用Browserify.我也试图将我的测试编译成单个文件.但不像我的主要应用程序,我工作得很好,我很难得到测试编译.主要区别在于测试有多个入口点,没有像该应用程序那样的单个入口点.但我收到Browserify的错误,它无法找到入口点.
browserify = require 'browserify'
gulp = require 'gulp'
source = require 'vinyl-source-stream'
gulp.task 'tests', ->
browserify
entries: ['./app/js/**/*Spec.coffee']
extensions: ['.coffee']
.bundle
debug: true
.pipe source('specs.js')
.pipe gulp.dest('./specs/')
我是浏览器并尝试在浏览器中加载npm模块的新手,但是我收到以下错误:
未捕获的ReferenceError:未定义require
我正在关注http://browserify.org/上的教程.创建了包含以下内容的javascript文件:
var unique = require('uniq');
然后运行
npm install uniq
和
browserify main.js -o bundle.js
生成了bundle.js文件,我把它包含在我的html中,但仍然遇到上述错误.有什么想法我做错了什么？
这是最终HTML文件的内容:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="bundle.js"></script>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
这是bundle.js的内容:http://pastebin.com/1ECkBceB
这是script.js:
var unique = require('uniq');
我现在使用npm中没有开箱即用的软件包的方式是这样的:
package.json有:
"napa": {
"angular": "angular/bower-angular",
"angular-animate": "angular/bower-angular-animate",
"d3": "mbostock/d3",
"ui-router":"angular-ui/ui-router",
"bootstrap":"twbs/bootstrap"
},
"scripts": {
"install": "node node_modules/napa/bin/napa"
并将文件安装到node_modules目录中,我就像这样使用它们
require('angular/angular')
require('ui-router')
... etc
这是有效的,但我在想是否可以使用与bower一起安装的软件包(进入特定于bower的文件夹)并将它们原生用作节点模块？是否可以调整节点的模块分辨率并强制它不仅在node_modules目录中查找模块,还在bower目录中查找模块？或者可能使用npm link或其他什么？
是否有某种惯例与浏览器一起使用browserify？
browserify ×10
node.js ×5
gulp ×3
javascript ×3
babeljs ×2
npm ×2
angularjs ×1
bower ×1
ecmascript-6 ×1
gruntjs ×1
reactjs ×1
source-maps ×1
spine.js ×1
webpack ×1