如何管理客户端JavaScript依赖项？ [关闭]

Posted 2021-04-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何管理客户端JavaScript依赖项？ [关闭]相关的知识，希望对你有一定的参考价值。

虽然有很好的解决方案可以管理服务器端的依赖关系，但我找不到任何满足我所有需求的连接客户端javascript依赖关系管理工作流程。我想满足这5个要求：

以类似于npm的package.json或bower的bower.json格式管理我的客户端依赖项
它应该可以灵活地指向我的dependency.json文件中的git repo或实际的js文件（无论是在web上还是在本地），用于鲜为人知的库（npm让你指向git repos）
它应该将所有库缩小并命名为单个文件，如ender - 这是我需要在客户端的<script>标记中放入的唯一js文件
它应该像CoffeeJS4（现已死）一样对CoffeeScript提供开箱即用的支持
在浏览器中，我应该能够使用require样式： var $ = require('jquery'); var _ = require('underscore'); 或者更好的是，做headjs风格： head.js(['jquery', 'underscore', 'mylib'], function($, _, mylib) { // executed when all libraries are loaded });

如果不存在这样的单一工具，那么最好的工具组合是什么，即我可以使用像volo（或grunt）这样的工具链组合？

我已经研究了我在这里链接的所有工具，它们最多只能满足我最多3个要求。所以，请不要再发布这些工具。我只接受一个答案，提供满足我所有5个要求的单一工具，或者如果有人发布了具有多个此类工具的工具链的具体工作流程/脚本/工作示例，这些工具也满足我的所有要求。谢谢。

答案

require.js可以满足您的一切需求。

我对this问题的回答可能对你有帮助

例：

客户端应用程序项目层

sampleapp
    |___ main.js
    |___ cs.js
    |___ require.js

main.js是初始化客户端应用程序并配置require.js的地方：

require.config({
    baseUrl: "/sampleapp",
    paths: {
        jquery: "libs/jquery", // Local
        underscore: "http://underscorejs.org/underscore-min.js", // Remote
        backbone: "https://github.com/documentcloud/backbone/blob/master/backbone-min.js" // Remote on github
    },
    shim: {
        backbone: {
            deps: ["underscore", "jquery"] // Backbone depends on jquery and underscore
        }
    }
});

require(["cs!someCoffeescriptFile", "jquery", "backbone", "underscore"], function (SomeCoffeescriptFile, $, Backbone, _) {
    // Dependencies are loaded...
    // Execute code
});

依赖关系将在“cs！”前面加上cs插件。 cs插件编译coffeescript文件。

当您进入prod时，您可以使用r.js预编译整个项目。

node ./node_modules/requirejs/bin/r.js -o buildclientconfig.js

以下是您的要求：

以类似于npm的package.json或bower的component.json的格式管理我的客户端依赖项。不同但是好！
我应该可以灵活地指向我的dependency.json文件中的git repo或实际的js文件（无论是在web上还是在本地），用于鲜为人知的库（npm让你指向git repos）。是
它应该将所有库缩小并命名为单个文件，如ender - 这是我需要在客户端的脚本标记中放入的唯一js文件。是的r.js.
它应该像Box一样支持coffeescript。是
在浏览器中，我可以使用require style或headjs。是

另一答案

有几种选择：

project site允许您导入模块
http://browserify.org/解决了同样的问题
似乎正在积极发展的是RequireJS

JoinJS也可能是有意义的，它不管理依赖本身，但允许你使用其他大型库的切碎版本。

另一答案

我使用npm的下摆，我想添加一些我认为到目前为止尚未涵盖的额外好处。

Hem有一个独立的Web服务器（分层），因此您可以开发代码，甚至无需重新编译。除非我发布应用程序，否则我从不使用Component。
你不需要使用Spine.js来使用hem，你可以使用它来编译任意coffeescript包，如果你正确设置slug.json。这是我的一个使用cakefile自动编译的软件包：hem build
说到上面的内容，hem允许您使用npm链接链接本地系统上的其他依赖项，并且即使在使用分层服务器时也可以无缝地组合它们。事实上，你甚至不需要使用上面的https://github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client方法，你可以直接链接到依赖项目的coffeescript。
Hem支持用于视图的cake（嵌入式Coffeescript）和用于CSS的Stylus，并将所有这些与Coffeescript一起编译成一个JS和一个CSS文件。

这是使用Spine，hem，coffeescript应用设置的基本列表。随意忽略脊柱部分。事实上，有时我使用eco为非Spine应用程序设置目录结构，然后编辑spine app以更改为不同的编译结构。

在* nix系统上安装NPM：slug.json。我假设它可以从命令行获得。
全球安装下摆（curl http://npmjs.org/install.sh | sh）。开发已经分支到最近，所以你可能想直接从github（npm install -g hem），checkout分支和https://github.com/spine/hem在该文件夹中。
npm install -g .将脊柱作为全球指挥
npm install -g spine.app将在spine app folder中创建一个名为app的Spine项目，生成正确的目录结构和一堆骨架文件。
folder文件夹和编辑cd为您需要的库。将它们添加到dependencies.json，以便下摆知道在哪里找到它们。
可选：slug.json开发到npm link的任何本地软件包，你可以将它们添加到node_modules用于下摆（如果你想要编辑它，可以直接包含slug.json或index.js。）
index.coffee下载您刚刚输入的所有依赖项。
如果你看一下默认的spine配置，你可以在npm install .中从依赖项中获取所需的所有库。例子： app/lib/setup.coffee
在require，你只需要# Spine.app had these as dependencies by default require('json2ify') require('es5-shimify') require('jqueryify') require('spine') require('spine/lib/local') require('spine/lib/ajax') require('spine/lib/manager') require('spine/lib/route') # d3 was installed via dependencies.json require 'd3/d3.v2'并加载你的应用程序的主控制器。此外，您还需要index.coffee其他控制器中的任何其他类。您可以使用require lib/setup或require为控制器和模型生成模板。典型的Spine控制器如下所示，使用节点的spine controller something： spine model something
默认生成的require通常可以用于加载您的应用，但可以根据需要进行修改。根据您的要求，它只会提取一个Spine = require('spine') # Require other controllers Payment = require('controllers/payment') class Header extends Spine.Controller constructor: -> # initialize the class active: -> super @render() render: -> # Pull down some eco files @html require('views/header') # Makes this visible to other controllers module.exports = Header和一个index.html文件，您永远不需要修改它。
根据需要在js文件夹中编辑手写笔文件。它比CSS更灵活:)
从css，运行css开始下摆服务器，然后导航到folder查看您的应用程序。（如果你全局安装了下摆。）它有一些隐藏的参数，例如hem server监听所有端口。
使用适当的MVC技术构建应用程序的其余部分，并使用手写笔用于CSS和eco用于视图。或者根本不使用Spine，下摆仍然可以与Coffeescript和npm一起使用。使用这两种模型的项目有很多例子。

还有一件事：通常，localhost:9294会在您更新代码并保存文件时自动更新，这使得调试变得简单。运行--host 0.0.0.0会将你的应用程序编译成两个文件，hem server，它是缩小的和hem build。如果在此之后运行application.js，它将使用这些文件，不再自动更新。所以，在您真正需要缩小版本的应用程序进行部署之前，请不要使用application.css。

其他参考文献：hem server

另一答案

这是一个采用非常不同的方法的解决方案：将所有模块打包成JSON对象，并通过读取和执行文件内容而无需额外请求来获取模块。

纯客户端演示实现：hem build

Spine.js & hem getting started

STRd6 / require取决于在运行时可用的JSON包。为该包生成http://strd6.github.io/editor/函数。该软件包包含您的应用可能需要的所有文件。没有进一步的http请求，因为包捆绑了所有依赖项。这与客户端上的Node.js样式要求非常接近。

包的结构如下：

https://github.com/STRd6/require/blob/master/main.coffee.md

与Node不同，包不知道它的外部名称。这取决于包括依赖命名的pacakge。这提供了完整的封装。

鉴于所有这些设置，这是一个从包中加载文件的函数：

require

此外部上下文提供了模块可以访问的一些变量。

entryPoint: "main" distribution: main: content: "alert("It worked!")" ... dependencies: <name>: <a package>函数暴露给模块，因此它们可能需要其他模块。

还公开了其他属性，例如对全局对象的引用和一些元数据。

最后，我们在模块和给定的上下文中执行程序。

对于那些希望在浏览器中具有同步node.js style require语句并且对远程脚本加载解决方案不感兴趣的人来说，这个答案最有帮助。

另一答案

如果你在后端使用node / express，请查看loadModule = (pkg, path) -> unless (file = pkg.distribution[path]) throw "Could not find file at #{path} in #{pkg.name}" program = file.content dirname = path.split(fileSeparator)[0...-1].join(fileSeparator) module = path: dirname exports: {} context = require: generateRequireFn(pkg, module) global: global module: module exports: module.exports PACKAGE: pkg __filename: path __dirname: dirname args = Object.keys(context) values = args.map (name) -> context[name] Function(args..., program).apply(module, values) return module。

另一答案

我建议查看require，它似乎符合您的大部分要求。我不确定的是CoffeeScript。

dojo使用以异步模块定义（AMD）格式编写的模块。它有一个带有包的构建系统，您可以将它们聚合在一个或多个文件（称为层）中。显然它接受git类型的存储库，这里有关于构建系统的更多细节：

JavaScript 依赖管理：npm vs. bower vs.volo [关闭]

如何管理 OSGi 构建依赖项？

php 管理wordpress中的Javascript依赖项

如何使用 Typhoon 为集成测试注入虚假、存根或模拟依赖项

如何在 Spring Boot pom.xml 中临时禁用依赖项 [关闭]