Working with npm packages

Question

I wonder how you work with the npm as a package manager in a project?

My project uses the following file structure:

.
|_ site/
|  |_ bower_components/
|  |_ index.html
|  |_ assets/
|     |_ js/
|        |_ scripts.js
|
|_ dist/
|_ node_modules/
|  |_ underscore
|     |_ underscore-min.js
|
|_ gulpfile.js
|_ package.json
|_ ...

I use this gulp task for serving / browser refresh:

gulp.task('serve', function () {
      browserSync.init({
        server: {
          baseDir: ['site']
        },
        notify: false
      });

      gulp.watch(['site/**/*.html'], reload);
      gulp.watch(['site/assets/css/**/*.css'], ['styles', reload]);
      gulp.watch(['site/assets/images/**/*'], ['images']);
    });

Now when I want to include scripts from my node_modules folder (for example underscore) I would do this:

<script src="../node_modules/underscore/underscore-min.js"></script>

However this will give me a 404 File not found on the underscore-min.js file but the path is correct? In the "gulp serve task" the base directory is set to "site" so I guess I can't go one folder up with "../"?

I can not tell npm to save its modules in a different folder. Also the project structure seems to me pretty common so I wonder how would someone setup a project to work with the packages.

How would a workflow look like when using npm install somePackage? Do you copy it out of the node_modules inside to your projects folder (e.g. assets/js/..).

score 2 · Accepted Answer · answered Jan 25 '15 at 22:31

2

With browsersync you can pass a "routes" option:

// Since version 1.2.1
server: {
    baseDir: "app",
    routes: {
        "/node_modules": "../node_modules"
    }
}

Then just do

<script src="node_modules/underscore/underscore-min.js"></script>

As far as my recommendation: just use browserify and have browsersync serve the dist folder. You should be running the code that is going to make it to production, not uploading the dist folder and hoping it works.

answered Jan 25 '15 at 22:31

Austin Pray

4,926
2
22
30

This does not do the trick and I still get a 404 for underscore. Maybe because "the routes functionality will not re-write requests if the file exist in a baseDir location" ? See: https://github.com/shakyShane/browser-sync/issues/197 I'm using a modified version of the yeoman "generator-gulp-webapp" and there the files get served from the app folder. How would you serve files from the 'dist' folder while the script files ect. just get copied there after you used 'gulp-build'. To always compile the files and copy them to 'dist' seems rather slow to me. – Andi-lo Jan 27 '15 at 18:11
Check this out: https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md Browserify + Watchify does incremental builds so it only recompiles the the javascript that has changed. – Austin Pray Jan 27 '15 at 21:23

score 0 · Answer 2 · edited May 23 '17 at 10:34

0

I had the same issue. Solution is to use another way to define a relative path. I believe the issue you presented in your question is adressed in the following article on Stackoverflow: Relative Paths in Javascript in an external file

Regards, Kees

edited May 23 '17 at 10:34

Community

1
1

answered Jan 25 '15 at 22:07

kzpm

133
11

score 0 · Answer 3 · answered May 13 '16 at 17:01

When you are running a server, a client can never reference any path above the root path. As a solution you could put your dependency files somewhere inside your site's root folder, in something like a scripts folder. I wrote a plugin to do just that.

It works like this:

var DepLinker = require('dep-linker');
DepLinker.copyDependenciesTo('./site/scripts')
// Done

Working with npm packages

3 Answers3