【问题标题】:How to access node_modules folder from wwwroot in asp.net vnext project如何从 asp.net vnext 项目中的 wwwroot 访问 node_modules 文件夹
【发布时间】:2016-06-02 07:21:53
【问题描述】:

如何从我的 index.html 所在的 wwwroot 访问未包含在 Visual Studio 解决方案文件中的 node_modules 文件夹。该 index.html 文件需要引用 npm 安装的包,如 angular.js。

但是怎么做呢?

我不想将整个 node_modules 文件夹复制到 wwwroot 中。那些不是存放在那里的文件......

我不想在解决方案中包含 node_modules 文件夹,因为这会减慢一切并挂断...

似乎前端开发不属于VS...

【问题讨论】:

    标签: npm asp.net-core asp.net-core-mvc node-modules asp.net-core-1.0


    【解决方案1】:

    至少有两个明智的选择:

    • 使用app.UseStaticFiles提供其他文件夹。原始解决方案来自Ode to Code。我用它来 开发,因为 Visual Studio 似乎不尊重本地 .npmrc 文件设置为prefix = wwwroot/node_modules。理想情况下, node_modules 应捆绑用于生产。有npm rollup plugin 可以使用自动捆绑脚本 import 功能 (ES2015)。

    • 从 CDN 提供 node_modules(例如 unpkg.com)。这很简单,唯一的缺点是 CDN 的 响应时间,特别是如果您禁用了浏览器缓存 开发目的。

    这是在 ASP.NET Core 中提供文件夹的代码。您只需更改 Startup 类:

    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        ...some other stuff
    
        if (env.IsDevelopment())
        {
            ServeFromDirectory(app, env, "node_modules");
        }
    }
    
    public void ServeFromDirectory(IApplicationBuilder app, IHostingEnvironment env, string path)
    {
        app.UseStaticFiles(new StaticFileOptions
        {
            FileProvider = new PhysicalFileProvider(
                Path.Combine(env.ContentRootPath, path)
            ),
            RequestPath = "/" + path
        });
    }
    

    【讨论】:

    • 这个方案太短视了:没有办法在wwwroot之外发布任何静态文件/资源​​!那么如何部署node_modules
    • @Marcel 我的回答是在wwwroot 之外提供文件的工作方式。通常没有人再发布node_modules - 每个人都使用捆绑器。
    • “从 CDN 提供 node_modules” - 这是一个非常糟糕的建议。它基本上是在制造一个定时炸弹,一旦 CDN 公司在 X 年内关闭他们的域名,你的网站就会停止工作——如果域名被接管并且脚本,你就会面临漏洞替换为恶意软件(例如比特币挖掘脚本)。自 2020 年以来,由于浏览器实现了每站点缓存隔离,因此使用共享 CDN 并没有任何性能优势。
    【解决方案2】:

    您不应该从wwwroot 之外访问文件。 wwwroot 文件夹是您托管时可从外部访问的公用文件夹。

    上面的一切都是禁区。

    典型的发布过程是,您有一个 gulp 或 grunt 任务在编译或发布您的 ASP.NET Web 项目时运行,它会在那里运行任务并复制 wwwroot 文件夹内的必要文件,即 @ 987654324@ 或wwwdata/js

    当然,您也可以手动复制文件,但这很糟糕,尤其是当您更新许多依赖项时,很难手动跟踪。

    虽然它没有显示在解决方案中(只是间接地,在Dependencies/npm 部分中),您仍然可以通过点击解决方案资源管理器顶部的“显示所有文件”按钮并复制您需要的文件来使其可见.

    不过最好给它设置一个gulp任务,不过这不在本题的范围内。

    【讨论】:

    • 有没有更自动化的方式来做这件事,跟踪每个 npm 依赖的哪个文件和哪个路径很繁琐。
    • @Tseng 如果我使用 SystemJS,则不会。现在,我坚持使用 jspm 和 node 的重复依赖项,这样 VS typescript 就不会抱怨了。
    • 我花了一段时间才把它弄好,所以我将分享我的知识:您应该采取慎重的步骤来复制您需要的文件,将它们与您不需要的文件合并,然后复制将它们转移到您无法使用它们的地方。然后,由于您无法使用所需的文件,您将文件从无法使用的地方重复复制到可以使用的地方。当我意识到我可以安装和配置一个实用程序来为我完成这项工作时,我个人的尤里卡时刻到来了。
    • @BrianMacKay 的目标是将您的 js 下载到 node_modules 并从那里使用它,而无需进行多余的复制。你可以像设置你的开发机器一样设置你的生产机器,并且作为部署或构建的一部分,运行 npm update。您的产品服务器将指向 node_modules 并且一切正常。下面的 rgrippers 回答显示了如何做到这一点
    • @Sam 谢谢山姆。无法告诉您我今天在这方面浪费了多少时间,试图遵循实际上并不存在的最佳实践。这么愚蠢的、非生产性的问题……这里应该有明确的指导。
    猜你喜欢
    • 1970-01-01
    • 2021-08-31
    • 1970-01-01
    • 2016-07-17
    • 2018-11-25
    • 1970-01-01
    • 2015-02-23
    • 2016-07-29
    • 2021-02-12
    相关资源
    最近更新 更多