我现在使用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？

请考虑以下两个文件:

app.js

import Game       from './game/game';
import React      from 'react';
import ReactDOM   from 'react-dom';

export default (absPath) => {
  let gameElement = document.getElementById("container");

  if (gameElement !== null) {
      ReactDOM.render(
          <Game mainPath={absPath} />,
          gameElement
      );
  }
}

index.js

import App from './src/app';

该 gulpfile.js

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

gulp.task('make:game', function(){
  return browserify({
    entries: [
      'index.js'
    ]
  })
  .transform('babelify')
  .bundle()
  .pipe(source('index.js'))
  .pipe(gulp.dest('app/'));
});

错误:

gulp make:game …

我试图在使用fs对象的文件上使用browserify.当我浏览它时,调用require('fs')不会被转换并require返回{}.

这有什么解决方法吗？我在stackoverlow和其他地方看到了一些建议,但似乎没有完全实现.

我实际上希望使用browserify为我教授的课程创建一个谷歌网络打包应用程序.

提前致谢.

我习惯于简单和小型的JS项目,其中JS依赖关系被连接并缩小为构建过程的一部分,使用gulp和html中的脚本标记包含该缩小的JS文件的硬编码路径.它不优雅,可能有几个缺点,但从概念上讲它是一种简单的方法.

但是对于更大的项目,我理解看看包装系统如bower,browserify,requirejs,webpack等是好的.使用它们有什么好处,而不是我习惯做的方式？它有助于开发过程的主要方式是什么？

这些技术是我提到的竞争对手,还是其中一些是为了满足不同的目的而可以一起使用？他们之间有什么区别？

此外,我查看了webpack,它在某些地方描述,好像它是gulp的替代品.我认为gulp是一个构建系统,与这些包装工具不同？

编辑:这些概念如何与AMD或CommonJS相关？

我是打字稿的新手,我正在为WebGl编写一个小型的原型框架.我正在重构我的项目,并遇到了一些问题,如何组织我的项目,因为(模块和命名空间)方法似乎都有严重的缺点.

这篇文章不是关于如何使用这些模式,而是如何克服这些模式带来的问题.

现状:使用名称空间

来自C#,这似乎是最自然的方式.每个类/模块都获得它适当的命名空间,我在tsconfig.json中提供"outFile"参数,因此所有内容都连接成一个大文件.编译后,我将根命名空间作为全局对象.依赖项没有内置到项目中,所以你手动必须在你的html中提供所需的*.js文件(不好)

示例文件

namespace Cross.Eye {
    export class SpriteFont {   
        //code omitted
    }    
}

示例用法(通过在html中提供js文件,您必须确保将Cross命名空间加载到全局命名空间中)

namespace Examples {
    export class _01_BasicQuad {
        context: Cross.Eye.Context;
        shader: Cross.Eye.ShaderProgram;

        //code omitted
    }
}

优点

• 如果你是从C#/ Java出来的话,可以直截了当地使用
• 独立的文件名 - 重命名文件不会破坏您的代码.
• 易于重构:IDE可以轻松地重命名命名空间/类,并且将通过代码一致地应用更改.
• 方便:向项目添加类就像添加文件并在所需的命名空间中声明它一样简单.

缺点

对于大多数项目,我们建议使用外部模块并使用命名空间进行快速演示和移植旧的JavaScript代码.

来自https://basarat.gitbooks.io/typescript/content/docs/project/namespaces.html

• 根命名空间始终是(？)一个全局对象(坏)
• 不能(？)与browserify或webpack等工具一起使用,这对于将lib与其依赖项捆绑在一起是必不可少的,或者在实际使用lib时将自定义代码与lib捆绑在一起.
• 如果您计划发布npm模块,那么做法很糟糕

现有技术(？):模块

Typescript支持ES6模块,它们是新的和有光泽的,每个人似乎都认为它们是要走的路.这个想法似乎是每个文件都是一个模块,通过在import语句中提供文件,你可以非常明确地定义你的依赖关系,这使得捆绑工具很容易有效地打包你的代码.我大多数每个文件有一个类似乎与dhte模块模式不兼容.

这是重构后的文件结构:

此外,我在每个文件夹中都有一个index.ts文件,因此我可以导入其所有类 import * as FolderModule from "./folder"

export * from "./AggregateLoader";
export * from "./ImageLoader";
export * from "./TiledLoader";
export * from "./XhrLoaders";
export * from "./XmlSpriteFontLoader";

示例文件 - 我认为问题在这里变得清晰可见.. …

我正在使用browserify创建一个需要大型库(如jquery和three.js)的文件.编译过程需要几秒钟,可能是因为它重新编译了我所做的每个小改动的所有库.有没有办法加快速度？

对于我的团队在工作中,我试图建立一个半自动化的JavaScript脚本和依赖管理系统,杯和Browserify的帮助.

我甚至不确定使用当前可用的工具集(以及我有限的JavaScript知识)是否可以实现我想要实现的目标.我相信我想要实现的是一个非常常见的场景,但我一直无法找到我一直在寻找的信息.

请考虑以下图表:

这些线表示依赖性.对于共享模块,例如Module-v和Module-y,我不希望脚本通过包含在它们各自的捆绑包中而被复制.

我知道使用Browserify我可以手动忽略或排除模块,这在项目年轻时很好 - 但是随着项目的增长管理需要包含哪些依赖项将变得非常繁琐.

一个类似的Q&A在这里我觉得有什么,我试图问同样的本质,但对我来说,这是不太清楚.它还引用了gulp-browserify,后来被列入黑名单.

在我的图表中,我可以看到我有三个Browserify 入口点,但是我缺乏Gulp/Node/Browserify经验意味着我正在努力探索如何实现我想要的目标.

我很乐意尝试将它拼凑起来,正如我已经尝试过的那样 - 但项目经理正在我的脖子上呼吸,所以我不得不将一个临时的"解决方案"合并在一起,直到我能够实现一些东西更加自动化和强大.

提前致谢.

编辑

它从似乎Browserify的插件文档,这可能是能够通过实现因素束其亚组 向我指出的 ; 然而,由于我缺乏Node/Browserify/Gulp经验,我正努力将所有部分组合在一起.

相关问题

• 如何以编程方式使用factorify与browserify？

我正在尝试将AngularJS应用转换为使用browserify.我使用napa在node_modules中安装了所有的bower包.现在我想将它们浏览到一个单独的供应商包中,并将它们声明为"外部"依赖项.我想给它们别名,这样我就可以"require('angular')"而不是"require('angular/angular')",因为看起来你可以用外部来做.

我见过的例子(例如http://benclinkinbeard.com/posts/external-bundles-for-faster-browserify-builds/)都假设我已将供应商文件下载到'lib'目录中.我想从node_modules中捆绑我的供应商文件.看起来应该很容易,但我看不出怎么做.

我从CDN加载jQuery,当我尝试将FullCalendar导入我的脚本时会发生此错误:

未捕获错误:找不到模块'jquery'

这是我的脚本:

'use strict'

import $ from 'jquery'
import 'fullcalendar'

$('#calendar').fullCalendar()

我正在运行此命令来转换我的脚本:

browserify index.js -t babelify -x jquery > index.min.js

我的HTML看起来像这样:

<!DOCTYPE html>
<div id=calendar></div>
<script src=https://code.jquery.com/jquery-2.2.0.min.js></script>
<script src=index.min.js></script>

我也试过了browserify-shim,depends: ['jquery', 'moment']但没有任何区别.

我怀疑这是因为FullCalendar JS文件有一个UMD包装,做自己的require('jquery')和require('moment'),但我认为外部标志将足够聪明来检测这一点.

我可以解决这个问题吗？

更新:这是我想要实现的最小示例,但是我的实际代码涉及比FullCalendar更多的依赖项,并且所有第三方依赖项都连接到一个vendor.min.js文件中,与我们的代码(例如index.js)分开.

我最近从browserify切换到webpack,构建时间从4s跃升到16s(2014 MBP).我理解webpack确实比浏览器更多,但我不应该花那么长时间.我的构建过程非常简单.有没有提示或选项来改善我的构建时间？

var webpackOptions = {
  cache : true,
  output: {
    filename: '[name].js',
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'jsx-loader' },
      { test: /\.css$/, loader: "style!css" }
    ]
  },
};


gulp.task('buildJs', function(){ 
    multipipe(
      gulp.src(jsSrcPath),
      named(),
      webpack(webpackOptions),
      uglify(),
      gulp.dest(jsDestPath)
    ).on('error', function(error){
      console.log(error)
    });
});