标签: browserify

这是一个问题,只是为了确认我对节点browserify的理解.

substack/node-browserify说:

兼容性:许多不执行IO的npm模块在浏览后会正常工作.其他人需要更多的工作 许多节点内置模块已被包装在浏览器中,但只有在您明确要求(或)使用其功能时才能使用.

-

当你需要()时,获取节点核心库事件,流,路径,url,断言,缓冲区,util,querystring,http,vm和crypto的浏览器版本

节点browserify是否获取节点内置模块的源代码,并构造捆绑文件; 通过正确选择当前工作的NVM版本？

实际上,我第一次使用browserify和maxogden/websocket-stream,并且效果惊人.

所以我有一个文件目录,其中两个文件立即在文件夹中:

views/view1.js
views/view2.js

但是一个嵌套的层次更深

views/other/view3.js

我想grunt-browserify使用别名映射编译这些,所以我可以要求它们:

require('view1')

require('view2')

require('other/view3')

所以我在grunt-browserify配置中设置了简单的映射:

{
  expand: true,
  cwd: 'views/',
  src: ['**/*.js'],
  dest: ''
}

前两个文件require()很好,但最后一个文件找不到.我正在使用的别名映射只是深入了解一个级别.我怎样才能让它下降到我提供的每个级别？

在下面的代码中HeadDirective.prototype.link,this等于全局window对象而不是HeadDirective实例.我的理解是this原型函数内部的值是包含对象本身.

var HeadDirective = (function () {
    function HeadDirective($rootScope, $compile) {
        this.$rootScope = $rootScope;
        this.$compile = $compile;
        this.restrict = 'E';
    }
    HeadDirective.prototype.link = function (scope, elem) {
        var html = '<link rel="stylesheet" ng-repeat="cssUrl in routeStyles" ng-href="{{cssUrl}}" />';
        elem.append(this.$compile(html)(scope));
        scope.routeStyles = [];
        this.$rootScope.$on('$routeChangeStart', function (e, next, current) {
            if (next && next.$$route && next.$$route.css) {
                if (!Array.isArray(next.$$route.css)) {
                    next.$$route.css = [next.$$route.css];
                }
                angular.forEach(next.$$route.css, function (sheet) {
                    scope.routeStyles.push(sheet);
                });
            }
        });
        this.$rootScope.$on('$routeChangeSuccess', …

当我运行我的业力单元测试时,我收到以下错误:

karma start karma.conf.js 

Fatal error: bundle() no longer accepts option arguments
Move all option arguments to the browserify() constructor.

我正在使用以下版本运行:

karma 0.12.21
karma-browserify 0.2.1
browserify 5.9.3

我真的不知道bower_components目录来自我的Node Express应用程序,但它似乎与我的node_modules文件夹竞争关注,因为它们包含jquery和bootstrap.

我正在使用Browserify,我正在尝试捆绑jquery,bootstrap和其他一些组件.Bower到底发生了什么？我需要鲍尔吗？

例如,当我require('jquery')在我的应用程序代码中执行操作时,如何知道它是来自NPM node_modules还是Bower bower_components？

根据http://www.slant.co/topics/1089/viewpoints/1/~what-are-the-best-client-side-javascript-module-loaders~browserify#9使用Browserify的一个缺点是那:

并非所有的javascript库都有npm版本

虽然为现有库创建npm包并不太难,但这意味着在库更新时进行维护.虽然大多数库现在都在npm上,但许多客户端专用库却没有.

除了知道如何install使用现有模块之外,我对npm没有任何经验.鉴于此,使用客户端非npm库进行浏览时最简单/最好的方法是什么？

有没有办法让我将本地Javascript文件声明为依赖项,而不是通过npm查找它？

我想在浏览器中使用我的NodeJS模块 - 所以我用browserify它来处理它.

现在,我如何停止browserify在bundle文件中包含模块的依赖项？在这种情况下依赖是lodash,我将在其中单独加载它index.html.

这是我到目前为止所得到的:

的index.html

<script src="lodash.js"></script>
<script src="my-module.js"></script>

index.js

var _ = require('lodash');

_.each([0, 1, 2], function(item) {
    console.log(item);
});

gulp.js

var browserify = require('browserify'),
  source = require('vinyl-source-stream');

gulp.task('browserify', function() {
  return browserify()
    .require('./index.js', {
      expose: 'my-module'
    })
    .bundle()
    .pipe(source('my-module.js'))
    .pipe(gulp.dest('./'));
});

我有一个简单的JavaScript项目,它使用Babel将ECMAScript 6转换为ES5,然后需要Browserify来利用ES6的模块.

就这样,我想出来Gruntfile.js编译它:

module.exports = function(grunt) {
  "use strict";

  grunt.loadNpmTasks('grunt-babel');
  grunt.loadNpmTasks('grunt-browserify');

  grunt.initConfig({
    "babel": {
      options: {
        sourceMap: true
      },
      dist: {
        files: {
          "lib/pentagine.js": "lib/pentagine_babel.js",
          "demos/helicopter_game/PlayState.js": "demos/helicopter_game/PlayState_babel.js"
        }
      }
    },

    "browserify": {
      dist: {
        files: {
          "lib/pentagine.js": "lib/pentagine_babel.js",
          "demos/helicopter_game/PlayState.js": "demos/helicopter_game/PlayState_babel.js"
        }
      }
    }
  });

  grunt.registerTask("default", ["babel", "browserify"]);
};

grunt运行得很好没有任何错误.但是,我收到以下错误:

Uncaught SyntaxError: Unexpected reserved word在export Uncaught SyntaxError: Unexpected reserved word上import

基本上我在主文件中做的是以下内容:

export class Game {
    ...
}

然后导入它像:

import {Sprite, Game} from "lib/pentagine";

我正在根据ECMAScript …

所有:

我是browserify和commonjs模式的新手.当我尝试使用Angular进行broserify时,我使用了一个非常简单的示例:

//main.js

require("angular");
var app = angular.module("app", []);

和:

// controller.js
require("angular");
angular.module("app");
        .controller("main", function($scope){
            $scope.message = "Hello";
        });

对于Gulp我使用:

// gulpfile.js

var gulp = require("gulp");
var browserify = require('browserify');
var source = require('vinyl-source-stream');


gulp.task('browserify', function() {
    // Grabs the app.js file
    return browserify('./app/main.js')
        // bundles it and creates a file called main.js
        .bundle()
        .pipe(source('bundle.js'))
        // saves it the dest/ directory
        .pipe(gulp.dest('./dest/'));
})

但这不起作用(我肯定知道这一点,但不知道如何做到这一点),我试着添加require("./controller");但没有运气.

我想知道如何将控制器.js添加为commonjs所需的模块并对其进行浏览,或者无论如何(如果我们不需要添加它),只需使它在commonjs模式下工作即可.

我找到一篇文章谈到这个:http://ardeibert.com/modularizing-an-angularjs-app-with-browserify/ 但它的方式只是导出所有控制器函数,我仍然需要在main.js中注册它们,如果所以,我想知道如何在controller.js中使用其他服务/工厂,如依赖注入？

我认为使用browserify的原因是它可以帮助找出依赖结构,但我想知道如何让它知道app模块和主控制器之间的关系？

谢谢

我开始学习一些新的前端工具,特别是Vue.js,Gulp,Node,Babel和Browserify.

我已经完成了所有工作,但我遇到了一个问题,我为我的应用程序创建的Vue实例不是全局的,因此(我假设)我无法访问我的浏览器的Vue devtools.

在我的gulpfile中,我有一个捆绑javascript应用程序的任务:

gulp.task('build-js', function (){
    return browserify('src/javascript/app.js')
        .transform(babelify, { presets: ['es2015'] })
        .bundle()
        .on('error', function (e){
            console.log(e.message);
            this.emit('end');
        })
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('public/javascript'));
});

在我的app.js文件中,我像这样实例化我的Vue实例:

var Vue = require('vue');

Vue({
    el: '#app',
    data:{
        message: 'Worked!!!'
    }
});

作为测试,相关的html看起来像这样index.html:

<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <input v-model='message'></input>
    </div>
    <script type="text/javascript" src="javascript/bundle.js"></script>
</body>

代码有效; 我可以键入我的绑定输入对象并查看标题中镜像的结果,但我无法访问Vue devtools:

并且扩展名已经安装并启用:

我一直在寻找周围的解决方案,并已看到帖子里的人说的Vue分配给window或global对象,但结合了Vue的图书馆,不是我的特定实例.

有没有办法让我的Vue实例全局化？我误解了这应该如何运作？