标签: browserify

我正在尝试在现有的AngularJS项目中实现Browserify,以便创建多个共享许多通用模块的SPA.

我面临的问题是如何提取模板文件列表,我可以将其输入到grunt-angular-templates中.

我为每个应用创建了"路线"文件.此应用程序包含所有应用程序状态的ui-router配置.这意味着每个模板的路径都包含在该文件中的值中:'templateUrl:path_to_template_file'.

如何提取每个路径并将它们提供给grunt-angular-templates？

提前致谢.

在下面的CommonJS的/ Browserify模块,我怎样才能避免导入既foo与bar每一次-而不是导入仅仅是基于条件所需要的一个init()？

var Foo = require('foo'),
    Bar = require('bar'),

Component = function(config) {
  this.type = config.type;
  this.init();
};

Component.prototype = {

  init: function() {
    var instance = null;

    switch (this.type) {
      case ('foo'):
        instance = new Foo(...);
        break;
      case ('bar'):
        instance = new Bar(...);
        break;
    }
  }
};

我已经为Web开发创建了一个JS库,它由几个模块组成,这些模块构建了多个分发版本.当它通过cdn或例如使用Bower分发时,它很好.

但现在我正在尝试使用NPM发布它,以便可以使用Browserify进行消费.我的问题是如何静态暴露多个主文件,以便Browserify可以使用它们.

我是浏览器的新手,虽然它的好处似乎很有吸引力但我的用法并不完全清楚.

我有几个问题,希望有人能澄清一下.

1. 我看过有关在package.json中使用browserify-shim的博客帖子,包括第三方库,如jquery和bootstrap.我也看过使用gulp等工具生成捆绑文件的帖子.我似乎无法找到一个很好的答案,如果像gulp这样的工具能够自动化这个过程,为什么需要使用browserify-shim.有人可以解释一下吗？为什么甚至需要browserify-shim？我觉得gulp解决方案有点干净,虽然更多涉及.它不会污染package.json与browserify特定的东西,这是一个构建的东西,因此与gulp(只是我的个人意见)一起

2. 如何处理不在npm但不公开的第三方图书馆？例如,我们从第三方购买脚本.该脚本不是任何常见的js,而是具有一些依赖性的常规js文件(例如,在jquery和下划线上).

这是事情,

我来自一个网页中包含多个js文件的世界.有些总是包含在页面中(您的库,菜单等...),其他则取决于当前页面(登录页面的js,订阅的js等).基本上让我们说每页有1个不同的js文件加上libs.

现在我想用browserify开始一个新项目,我面临一个大问题:

• 在我看到的所有示例中,总有一个入口点(如app.js).
• 在我的情况下,我将有n个入口点(每页1个).

所以我的问题是:

• 每页有1个入口点是否违反良好做法？为什么？
  • 如果是,那么使用大量特定于页面的JS浏览大型应用程序的良好做法是什么？
  • 如果否,如何使用Gulp实现自动化.在我发现的每个例子中.您必须知道每个文件的名称并一个接一个地处理它.(例如,在一个包含数百页的大型项目中,这非常烦人)
• 你在项目中如何处理这个问题？我是否必须完全重新思考处理特定于页面的JS代码的方式？

我无法正确加载gulp babel/polyfill.在我的情况下,Array.from方法是未定义的.但是,如果尝试browser-polyfill.js使用gulp 加载,.add(require.resolve("babel/polyfill"))我会收到错误"only one instance of babel/polyfill is allowed".源代码是正确的,因为我用babel测试了它browser-polyfill.js.

源代码:

//Lib.js
export default class Lib
{
  constructor()
  {
    var src = [1, 2, 3];
    this.dst = Array.from(src);
  }
  foo()
  {
    return this.dst;
  }
}

//main.js
import Lib from "./Lib";

var l = new Lib();
console.log(l.foo()); //Uncaught TypeError: Array.from is not a function

Gulpfile:

var gulp       = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var source     = require('vinyl-source-stream');
var buffer     = require('vinyl-buffer'); …

我一直在使用factor-bundle来包装我的常见JS文件:

browserify index.js bar-charts.js list-filter.js dashboard.js 
 -p [ factor-bundle -o ../../static/js/index.js -o ../../static/js/bar-chart.js -o ../../static/js/list-filter.js -o ../../static/js/dashboard.js ] 
 -o ../../static/js/common.js

然后我在我的HTML中包含了common.js以及一个Bootstrap警报:

 <div class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    Alert alert!
 </div> 
 <script src="/static/js/common.js"></script>

但警报关闭按钮不起作用,因此Bootstrap显然没有被提取.

如果我在CDN中包含Bootstrap和jQuery,在同一个HTML页面中,它可以正常工作:

<div class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    Alert alert!
 </div> 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

这是一个JSFiddle与我的common.js文件,不工作:http://jsfiddle.net/2v9easbz/

这是一个JSFiddle与直接CDN链接,工作正常:http://jsfiddle.net/vkf027z2/

我的common.js文件有什么问题？

TL; DR

minifyify(Browserify插件)使用uglify -js但似乎无法处理条件编译:

• 压缩工作
• uglifyjs单独适用于条件编译
• minifyify提供了额外的编译优化,但我无法使用条件编译

我正在使用Browserify与babelify变换器和minifyify插件.这是cmd,在可读部分细分:

browserify src/scripts/app/index.js -o build/prod/public/assets/js/appBundle.min.js -t [ babelify --presets [ es2015 ] ] -p [ minifyify --no-map --uglify [ --compress [ --drop_console --dead_code --conditionals --unused --if_return ] --mangle --screw-ie8 --define [ DEBUG=false ] ] ]

我已经获得了所有设置/选项.但是,我无法使条件编译工作.Minifyify使用uglifyjs的minify方法.我通过minifyify的事实不应该真正改变任何事情.

直接通过uglifyjs建立工程

uglifyjs input.js --compress --dead_code --define DEBUG=false -o output.js

但是我失去了minifyify提供的额外压缩/优化.

我也对另一个构建过程持开放态度.我的需求在当前流程的设置中恢复:

• CommonJS需要模块
• 将ES6转换为ES5
• 先进的缩小/压缩

我正在努力学习ng2的绳索,依赖注射系统正在扼杀我.

我正在使用ng快速入门:https: //github.com/angular/quickstart/blob/master/README.md

我正在尝试将此软件包导入应用程序:https://www.npmjs.com/package/arpad.我通过npm update安装了包,我的package.json依赖项如下所示:

"dependencies": {
  "angular2": "2.0.0-beta.9",
  "systemjs": "0.19.24",
  "es6-promise": "^3.0.2",
  "es6-shim": "^0.35.0",
  "reflect-metadata": "0.1.2",
  "rxjs": "5.0.0-beta.2",
  "zone.js": "0.5.15",
  "arpad":"^0.1.2" <----- the package i'm trying to import
}

这是包导出其代码的方式:

module.exports = ELO;

我有一个组件导入模块,如下所示:

import {ELO} from 'node_modules/arpad/index.js';

这是systemJS在应用程序的index.html中的配置方式:

  <script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    },
    map:{'arpad':'node_modules/arpad'} <---- here 
  });
  System.import('node_modules/arpad/index.js'); <--- and here for good measure
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>

现在,它看起来很像我在黑暗中拍摄,这正是应用程序控制台中的错误消息让我做的事情.当我尝试在组件中使用这样的模块时:

public elo = ELO;
constructor(){
    this.score …

我想浏览,tsify和babelify我的代码.Browserify和其他一个开发者工作,但他们在一起.Babel似乎被忽略了(甚至没有读过.babelrc).

我有以下gulp代码:

const gulp = require("gulp");
const browserify = require("browserify");
const source = require('vinyl-source-stream');
const tsify = require("tsify");
const babelify = require("babelify");

function build() {

  var b = browserify({
    basedir: '.',
    debug: true,
    cache: {},
    entries: ['src/index.ts'],
    packageCache: {}
  });

  return b
    .plugin(tsify)
    .transform(babelify)
    .bundle()
    .on("error", function (err) { console.log("Error: " + err.message); })
    .pipe(source('build.js'))
    .pipe(gulp.dest("build"));
 }

 gulp.task("build", build);

有了这个babelrc

{
   "presets": ["minify"]
}

和那些依赖

"@babel/core": "^7.2.2",
"babel-preset-minify": "^0.5.0",
"babelify": "^10.0.0",
"browserify": "^16.2.3",
"gulp": "^4.0.0",
"tsify": "^4.0.1",
"typescript": "^3.2.2",
"vinyl-source-stream": …