javascript - 在Angular中需要/Browserify连帽衫

我的目标是在Angular中使用hood.ie框架。我不想使用所有的JS文件，而是要使用Browserify和require()依赖项。我找不到要求使用hoodie的方法(hood.ie的模板应用程序使用由“hoodie start”命令提供的<script src="/_api/files/hoodie.js">。是否可以在require()中包括它？

我的项目结构:

.
+-- app
|  +-- app.js
|  +-- index.html
|  +-- main
|  |  +-- index.js
|  |  +-- main.html
|  +-- auth
|  |  +-- index.js
|  |  +-- login.html
+-- dist
|  +-- main
|  |  +-- main.html
|  +-- auth
|  |  +-- index.html
|  +-- browsified.js
|  +-- index.html

dist目录由gulp构建:

var gulp = require('gulp')
var browserify = require('browserify')
var source = require('vinyl-source-stream')
var exec = require('child_process').exec

gulp.task('hoodie-start', ['copy-static', 'browserify'],  function() {
  var child = exec('node ./node_modules/hoodie-server/bin/start --www dist --custom-ports 6001,6002,6003');
  child.stdout.on('data', function(data) {
      console.log(data);
  });
  child.stderr.on('data', function(data) {
      console.log(data);
  });
  return child;
});

gulp.task('browserify', function() {
    var options = {
        entries: ['./app/app.js'],
        extensions: ['.js']
    }
    return browserify(options)
        .bundle()
        .pipe(source('browserified.js'))
        .pipe(gulp.dest('./dist'));
});

gulp.task('copy-static', function() {
    return gulp.src(['./app/**/*.html'])
        .pipe(gulp.dest('./dist'));
});

package.json文件(从不相关的部分中剥离):

{
  ...
  "main": "dist/index.html",
  "dependencies": {
    "angular": "^1.4.8",
    "angular-route": "^1.4.8",
    "hoodie-plugin-angularjs": "^0.1.1",
    "hoodie-plugin-appconfig": "^2.0.1",
    "hoodie-plugin-email": "^1.0.0",
    "hoodie-plugin-users": "^2.2.2",
    "hoodie-server": "^4.0.2"
  },
  "bundleDependencies": [
    "hoodie-plugin-angularjs",
    "hoodie-plugin-appconfig",
    "hoodie-plugin-email",
    "hoodie-plugin-users",
    "hoodie-server"
  ],
  "devDependencies": {
    "browserify": "^13.0.0",
    "gulp": "^3.9.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "hoodie": {
    "plugins": [
      "hoodie-plugin-appconfig",
      "hoodie-plugin-email",
      "hoodie-plugin-users",
      "hoodie-plugin-angularjs"
    ]
  }
}

最后，app.js:

var angular = require('angular');
var ngRoute = require('angular-route');

var main = require('./main');
var auth = require('./auth');

var app = angular.module('myApp', ['ngRoute', 'hoodie', main.name, auth.name]);

app.config([
    '$routeProvider', 'hoodieProvider', function($routeProvider, hoodieProvider) {

        $routeProvider.when('/login', {
            templateUrl: 'auth/login.html',
            controller: 'LoginController'
        });

        $routeProvider.otherwise({
            templateUrl: 'main/main.html',
            controller: 'MainController'
        });

        hoodieProvider.url('http://myapp.com');

    }
]);

我计划利用hoodie-plugin-angularjs的优势，但这也不是require()-able的。

有什么提示如何将其融合在一起吗？

最佳答案

看来您这里有2个问题。首先，通过查看文档，您似乎需要使用公开Hoodie构造函数的client库。其次，hoodie-plugin-angularjs库expects a global Hoody 可用。请尝试以下操作:

// app.js

// Make global
var Hoodie = require('hoodie-client');
window.Hoodie = Hoodie;

// Now the plugin knows about Hoodie.
// It will run the side-effect,
// namely registering the angular service
require('hoodie-plugin-angularjs');

// ... Angular code that uses Hoodie