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

Parse html templates into client side JS. Angular + Browserify + Babel + ES2015 + Gulp

本文关键字：Angular Browserify Babel Gulp ES2015 JS 客户端 html      更新时间：2023-09-26

我有问题的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;

and Gulp Browserify Task: 

/** 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 ) )
} );

现在当我尝试浏览APP时，我得到错误:

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

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

p。我试过:

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

我解决了:有两个选项可以解决这个问题:

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

.transform( 'html2js-browserify' )

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

相关文章：