如何在自动导入node_moduels包时获取正在使用的文件内容?

时间:2017-12-21 06:13:50

标签: angularjs gulp-inject gulp-livereload

我正在使用angular 1.6和gulp with live reload和babel来运行开发服务器。使用纱线安装所有角度包,使用npmfiles在index.html中自动导入依赖项。

所有包都在最终的index.html中添加到适当的位置,但该文件只有内容相应的index.js,在node_modules / package / package.json" main:attributes

中提到

例如。添加角度库。最终.tmp / index.html的内容低于内容

<script src="/../node_modules/angular/index.js"></script>

但是 angular / index.js 具有以下内容

 require('./angular');
 module.exports = angular;

但我想要角度js文件的内容

另外,它在控制台中为每个包提供了多个错误

  

未捕获的ReferenceError:在index.js:1

中未定义require

这是相关代码

gulp.task('connectDev', function() {
    connect.serverClose();
    connect.server({
        name: 'Zeus:Dev',
        root: [path.join(conf.paths.tmp, '/serve'), conf.paths.src],
        port: 3000,
        debug: false,
        host: '127.0.0.1',
        fallback: path.resolve('./.tmp/serve/index.html'),
        livereload: true,
        directoryListing: false,
        middleware: function(connect) {
            return [connect().use('/node_modules', connect.static('node_modules'))];
        }
    });
});

并使用此任务我将添加所有node_modules libray

 var npmVendors = gulp.src(mainNPMFiles( {nodeModulesPath: '../node_modules/'} ));
  // .pipe($.babel({"presets": ["env"]}));

  var npmOptions = {
    relative: true,
    starttag: '<!-- inject:ang:{{ext}} -->',
    ignorePath: [conf.paths.src, path.join(conf.paths.tmp, '/serve')],
    addRootSlash: true,
    // transform: function (filePath, file) {
    //     return file.contents.toString('utf8');
    // }
  };

在src / index.html

<!-- inject:ang:js -->
<!-- endinject -->

现在,如果我取消注释转换属性,则会直接在index.html中添加文件内容而不使用<sctipt>标记

所以我的问题是如何添加文件的原始内容而不是index.js的两行

1 个答案:

答案 0 :(得分:1)

浏览器不理解require语句。您必须使用依赖性捆绑工具,如browserify或webpack with gulp。

在gulp中添加一个任务来浏览您的依赖项,它将自动捕获您的完整源代码和供应商代码

您可以使用browserify插件获取gulp。

<强>更新

我为你创建了一个sample project。请有一个厕所