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

【问题标题】：Parse html templates into client side JS. Angular + Browserify + Babel + ES2015 + Gulp将 html 模板解析为客户端 JS。 Angular + Browserify + Babel + ES2015 + Gulp
【发布时间】：2016-07-04 10:54:28
【问题描述】：

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

APP.js：

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

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

Config.js：

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'

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

PS。我试过了：

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

但问题仍然存在。

【问题讨论】：

标签： javascript angularjs gulp ecmascript-6 browserify

【解决方案1】：

好的，我解决了这个问题：解决这个问题有两种选择：

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

.transform( 'html2js-browserify' )

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

【讨论】：