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

Question

我使用的是Angular 1.6，并用实时重新加载和Babel吞噬开发服务器。使用纱线安装所有角包装，以便使用npmfiles在index.html中自动化导入依赖项。

在适当的位置上添加在Final Index.html中的所有软件包，但是该文件仅具有node_modules/poffage/package.json中所述的相应index.js的内容。

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

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

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

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

，但我想要Angular JS文件的内容

另外，它在每个软件包的控制台中给出了多个错误

未介绍的参考：未在index.js上定义要求：1

这是相关代码

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 -->

现在，如果我取消 transform 属性，它将直接在index.html中添加文件的内容，而无需<sctipt> TAG

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

Answer 1

浏览器不了解需要语句。您将必须使用依赖性捆绑工具，例如浏览或Webpack。

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

您可以将浏览插件用于Gulp。

update

我为您创建了一个示例项目。请有一个loo