Question

我想知道你如何使用npm作为项目中的包管理器？

我的项目使用以下文件结构：

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

我使用这个gulp任务进行服务/浏览器刷新：

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

现在，当我想要包含来自node_modules文件夹的脚本（例如下划线）时，我会这样做：

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

但是这会给我在underscore-min.js文件中找不到404文件，但路径是否正确？在＆＃34; gulp服务任务＆＃34;基目录设置为＆＃34; site＆＃34;所以我想我不能用＆＃34; ../"去一个文件夹？

我无法告诉npm将其模块保存在不同的文件夹中。此外，项目结构在我看来很常见，所以我想知道如何设置一个项目来处理这些包。

使用npm install somePackage时，工作流程会如何？你是否将它从node_modules里面复制到你的项目文件夹中（例如assets / js /..).

Answer 1

使用browsersync，您可以传递＆＃34;路由＆＃34;选项：

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

然后就这样做

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

就我的建议而言：只使用browserify并让browsersync为dist文件夹提供服务。您应该运行将要生产的代码，而不是上传dist文件夹并希望它能够正常工作。

Answer 2

我有同样的问题。解决方案是使用另一种方式来定义相对路径。我相信您在问题中提出的问题在以下关于Stackoverflow的文章中得到了解决： Relative Paths in Javascript in an external file

此致基斯

Answer 3

当您运行服务器时，客户端永远不能引用根路径上方的任何路径。作为一种解决方案，您可以将依赖项文件放在站点的根文件夹中的某个位置，例如scripts文件夹。我写了plugin来做这件事。

它的工作原理如下：

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

使用npm包

3 个答案: