javascript - 将 html 模板解析为客户端 JS。 Angular + Browserify + Babel + ES2015 + Gulp

Question

我对 Browserify Angular 配置文件有疑问，其中我 require() HTML 模板。我尝试制作 stringify 或 browserify-ng-html2js 在 transform() 中，但在这种情况下，我在 gulp 文件中有多个转换调用，而且我无法在没有错误的情况下完成它。链接 giver 错误也。

APP.js:

import angular from 'angular';
import appModule from './config/config'

angular.bootstrap( document, [ appModule.name ] );

配置文件:

import angular from 'angular';
import uiRouter from 'angular-ui-router';

const app = angular.module( 'app', [ uiRouter ] );

app.config(( $stateProvider, $urlRouterProvider, $locationProvider ) => {
  $urlRouterProvider.other( '/' );

  $stateProvider
    .state( 'todos', {
      url: '/',
      template: require( '../views/todos.html' )
    } )
    .state( 'about', {
      url: '/about',
      template: require( '../views/about.html' )
    } );

  $locationProvider.html5Mode( true );
});

export default app;

和 Gulp Browserify 任务:

/** Browserify TASK **/
gulp.task( 'browserify', function () {

  let bundler = browserify({
    entries: [ config.sourceDir + 'app.js' ],
    debug: true
  });

util.log( '-> Compile JS...' );

  //Grab files
  return bundler
  .transform( 'babelify', { presets: [ "es2015", "react" ] } )
  .bundle()
  .on('error', function (err) {
      console.error(err);
      this.emit('end');
    })
  .pipe( source( 'bundle.js' ) )
  .pipe( buffer() )
  .pipe( sourcemaps.init({ loadMaps: true }) )
    .pipe(uglify())
  .pipe( sourcemaps.write( './' ) )
  //Dest
  .pipe( gulp.dest( config.buildDir ) )
} );

现在，当我尝试使用 Browserify APP 时，出现错误:

 Error: Cannot find module 'todos/todos.html'

任何提示和帮助将不胜感激:)谢谢和问候!

附言。我试过:

  .transform( stringify, {
    appliesTo: { includeExtensions: [ 'html', 'htm', 'jsp' ] },
    minify: true
  } )

但问题依旧。

Answer 1

好的，我解决了:有两种方案可以解决这个问题:

首先是通过 browserify require() HTML 文件，而不是像 JS 那样使用它们，我们需要安装其中一个转换 -> npm i -D html2js-browserify 并将其附加到 gulpfile:

.transform( 'html2js-browserify' )

第二个选项是将所有 View 复制到我们在 express 中设置为提供所有静态文件的公共(public)/静态目录，并使用 templateUrl: <path-to-template-inside-public-dir>我希望它能帮助任何人。问候!