how to get content of file which are using require when auto importing node_moduels package?

Question

I am using angular 1.6 and gulp with live reload and babel to run a development server. Installing all angular packages using yarn so using npmfiles to automate import dependencies in index.html.

all packages being added in final index.html on proper place but that file only have the content the respective index.js which is mentioned in the node_modules/package/package.json "main: attributes

for eg. adding angular library. final .tmp/index.html has below content

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

but this angular/index.js have the following content

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

BUT I want the content of angular js file

also, it gives multiple errors in the console for each package

Uncaught ReferenceError: require is not defined at index.js:1

here is the relevant code

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'))];
        }
    });
});

and using this task I am adding all 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');
    // }
  };

in src/index.html

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

now if I uncomment the transform property it add the content of file directly in index.html without <sctipt> tag

SO my question is how to add the original content of file rather than the 2 lines of index.js

Answer 1

Browsers don't understand require statements. You will have to use Dependency bundling tools like browserify or webpack with gulp.

Add one more task in gulp to browserify your dependencies and it will automatically capture your full source and vendor code

You can use browserify plugins for gulp.

UPDATE

I have created a sample project for you. Please have a loo