在 Angular 中要求/Browserify 连帽衫

Question

我的目标是在 Angular 中使用 hood.ie 框架。我不想包含所有 JS 文件，而是想使用 Browserify 和 require() 依赖项。我找不到要求连帽衫的方法（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。

任何提示如何将它们一起探测？

Answer 1

您似乎有 2 个问题。首先，通过查看文档，您似乎需要 client library which exposes the Hoodie constructor. Second, the hoodie-plugin-angularjs library 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

在 Angular 中要求/Browserify 连帽衫

Require / Browserify hoodie in Angular

javascript

angularjs

browserify

hoodie