【问题标题】:Uglify one JS file using requirejs optimizer使用 requirejs 优化器 Uglify 一个 JS 文件
【发布时间】:2014-01-30 21:14:46
【问题描述】:

我想知道是否有一种方法可以使用已安装在我的计算机中的 r.js(RequireJS Optimizer)在命令行中仅对一个文件进行 uglify。 就像我们可以使用 node r.js cssIn="" out="" 来缩小 css 文件一样......

我实际上是在没有互联网连接的计算机上工作,我无法在上面安装其他东西(尤其是使用 npm)

也许有可能从另一台计算机下载一个 uglifyjs 包,包括准备安装在我的所有依赖项?不过我没有找到类似的东西......

谢谢

【问题讨论】:

    标签: javascript node.js requirejs uglifyjs


    【解决方案1】:

    从另一台计算机复制 uglify

    ​​>

    由于您在问题中提到了这种可能性,因此我将对其进行介绍。

    第一种方法

    1. 在具有uglify-js 的计算机上。找到uglify-js 的安装位置。归档该目录及其子目录。

    2. 在断开连接的计算机上。在您的项目的node_modules 子目录中取消归档该目录。假设项目位于/home/johndoe/foo。我想在/home/johndoe/foo/node_modules 中取消存档。

    3. 您可以在node_modules/uglify-js/bin/uglify-js 使用uglify-js

    第一种方法是我会使用的方法。

    第二种方法

    如果第一种方法对您不起作用或效果不佳,那么还有第二种方法。事实上,复制已安装的 Node 包并不能完美地复制安装过程。在某些情况下,它可能会完美运行,但在某些情况下可能不会。所以这里有一个方法可以让npm完成整个安装过程。

    1. 在安装了uglify的电脑上,执行:

      $ npm ls
      

      在输出中查找 uglify-js 和所有 inside 分层的包。输出将如下所示:

      ├── cookie@0.1.0
      ├─┬ uglify-js@2.4.12
      │ ├── async@0.2.10
      │ ├─┬ optimist@0.3.7
      │ │ └── wordwrap@0.0.2
      │ ├─┬ source-map@0.1.31
      │ │ └── amdefine@0.1.0
      │ └── uglify-to-browserify@1.0.2
      └── yaml@0.2.3
      

      在上面的输出中,您关心uglify-js 直到uglify-to-browserify。对于这些包中的每一个,请查看压缩包文件的 npm 缓存。在 Linux 和类似系统上,这将在 ~/.npm/ 中。例如,在我的机器上uglify-js 缓存在~/.npm/uglify-js/2.4.12/package.tgz。将这些包中的每一个复制到可以带到断开连接的计算机的媒体中。确保复制正确的版本。它们列在上面列表中的@ 符号之后。

    2. 将媒体移动到断开连接的计算机。

    3. 为每个包安装它:

      $ npm install [path to the tgz file]
      

      当您将tgz 传递给npm 时,只要满足所有依赖项,它就会忽略网络。这里的顺序很重要。您想从本身没有依赖关系的包开始。我相信npm ls 生成它的列表的方式,如果你只是按相反的顺序去,你会没事的。所以:

      • 定义
      • 源地图
      • wordrap
      • 乐观主义者
      • 异步
      • uglify-js

      在此过程结束时,uglifyjs 命令将位于node_modules/.bin/uglifyjs 中。您可以根据uglifyjs 自己的文件之一轻松对其进行测试。例如:

      $ node_modules/.bin/uglifyjs node_modules/uglify-js/lib/output.js
      

    我尝试了其他一些方法,但发现npm 非常渴望去网络寻找包裹。很容易想到“也许 ABC 会工作......”并发现它不起作用,因为即使一切都在本地可用,npm仍然需要网络连接。

    使用r.js 中包含的uglify-js

    r.js 优化器在其中包含 uglify-js。不幸的是,它没有被打包成可以在r.js 之外轻松使用。但是,您可以像这样访问它:

    var r = require("./node_modules/.bin/r.js");
    var fs = require("fs");
    
    var config = {};
    
    var fileContents = fs.readFileSync(process.argv[2]).toString();
    
    r.tools.useLib("mine", function (require) {
        require(["uglifyjs/index"], function (uglify) {
            var parser = uglify.parser;
            var processor = uglify.uglify;
    
            var ast = parser.parse(fileContents, config.strict_semicolons);
            if (config.no_mangle !== true) {
                ast = processor.ast_mangle(ast, config);
            }
            ast = processor.ast_squeeze(ast, config);
    
            fileContents = processor.gen_code(ast, config);
    
            if (config.max_line_length) {
                fileContents = processor.split_lines(fileContents,
                                                     config.max_line_length);
            }
    
            //Add trailing semicolon to match uglifyjs command line version
            fileContents += ';';
    
            fs.writeFileSync(process.argv[3], fileContents);
        });
    });
    

    如果上面的代码保存在一个名为script.js的文件中,并像node script.js input output这样调用,它将丑化input并将结果放入output。关键是使用r.js导出的tools.useLib方法。这允许访问r.js 包含的库。其余代码大部分是从r.js 中执行丑化的部分复制而来的。

    在命令行使用r.js

    $ r.js -o name=main exclude=main out=built.js
    

    这将仅优化模块main(在文件main.js 中)并将输出放入build.js。它不会遵循main 的任何依赖关系。但是,它通过添加模块名称作为第一个参数来修改define。这可以通过sedawkperl 等的后处理步骤来删除。

    如果您要 uglify 的文件将被填充以用于 RequireJS(不是实际的 AMD 样式模块),您不想使用 exclude 参数:

    $ r.js -o name=shimmed out=built.js
    

    就像上面的第一个命令一样,这也不仅仅是丑化文件。它在最后添加了一个define 调用。同样,这可以使用sed 或类似工具取出。

    (我确实可以在没有baseUrl=. 的情况下使用这些命令。但是,根据您的具体操作,r.js 可能会抱怨。因此您可能必须在命令行中添加baseUrl=.。)

    【讨论】:

      【解决方案2】:

      将文件放入文件夹

      从该文件夹中运行 r.js:

      node r.js -o baseUrl=. name=main out=main-built.js
      

      你那台电脑上没有互联网连接,把文件放在像 usb sitck 这样的东西上,然后在有互联网的电脑上丑化它不是更容易吗?

      【讨论】:

      • 这不起作用。我的 javascript 文件包含对其他文件的依赖关系,当我将文件单独提取到文件夹中并执行命令时,它会尝试跟踪依赖关系,这些依赖关系当然不在文件夹中。
      • 如果只是这一次,在下面添加一个路径?例如。要求('../file')
      【解决方案3】:

      我将说明如何直接从一台计算机复制节点包,因为通过这个技巧,你将拥有 uglify、clean-css 或任何你想要的包。

      背景是节点包在其自己的安装目录下包含其所有依赖项的副本 - 如果您使用的是 Windows(我在不要声称支持)

      假设一台计算机安装了clean-css

      which cleancss

      应该显示一个路径,例如/usr/local/share/npm/bin/cleancss,在这种情况下,您需要递归地将/usr/local/share/npm/lib/node_modules/clean-css/ 复制到另一台机器的相应node_modules 文件夹(也在/usr/local/share/npm/bin/ 中创建符号链接)以访问该路径没有互联网。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2013-09-23
        • 1970-01-01
        • 1970-01-01
        • 2014-08-25
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多