javascript - 在 Angular 中要求/浏览连帽衫

Question

我的目标是在 Angular 中使用 hood.ie 框架。我不想包含所有 JS 文件，而是想使用 Browserify 和 require() 依赖项。我找不到要求连帽衫的方法(hood.ie 的模板应用程序使用 <script src="/_api/files/hoodie.js">，它由“hoodie start”命令提供。有没有办法将它包含在 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()。

有什么提示可以将它们整合在一起吗？

Answer 1

看来您这里有 2 个问题。首先，通过查看文档，您似乎需要要求 client公开了 Hoodie 构造函数的库。二、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