更好地管理 Javascript 和 html 模板文件:编辑尽可能多的文件，但作为一个文件使用

Better management of Javascript and html template files: Edit as many files, but use as one file

本文关键字：文件 一个 Javascript 管理 html 尽可能 编辑 更好      更新时间：2023-09-26

>Background

有一个包含 100 多个 Javascript 和 HTML 模板文件的项目。 使用脚本加载器（yepnope）直接从我们的开发环境加载文件，以便在开发过程中，可以将一个小的更改保存到文件中，并在刷新浏览器后立即看到。

问题所在

起初效果很好，但现在项目变得更大了，浏览器加载所有文件需要很长时间。对于我们的生产环境，我们可以将所有文件连接在一起，但开发环境也需要敏捷，以加快开发过程并减少开发人员的挫败感。

问题

寻找某种解决方案，使我们能够保留当前的文件组织，但可能将文件作为一个大文件交付给浏览器。我不确定这将如何工作。这样的解决方案是每次检测到源文件中的更改时都会更新某种派生文件，还是将所有内容保存在一个大文件中，但允许在 IDE 中导航该文件，就好像它是目录结构一样？

目前我们使用PyCharm。

非常感谢！

你肯定应该连接你的javascript文件。提供许多文件真的是非常糟糕的事情。我现在使用的是咕噜声。这是一个nodejs任务运行器。我们有两个环境

  • 开发/本地 - 在本地环境中 Grunt 连接文件，但不要缩小它们。它还在每个文件上方添加了一个信息注释，因此如果您在 DevTools 中看到一些错误，则需要滚动一点才能看到确切的文件
  • 生产 - 缩小最终文件并删除注释。

使用这种方法，我们仍然将所有内容拆分为不同的文件，但只提供一个文件。我们实际上不仅将Grunt用于javascript，还用于html模板，CSS，生成缓存清单和主索引.html文件。以下是我们的package.json文件的样子：

{
  "name": "project",
  "version": "0.0.1",
  "description": "project",
  "repository": {},
  "devDependencies": {
    "grunt": "0.4.1",
    "grunt-contrib-concat": "0.3.0",
    "grunt-contrib-watch": "0.4.4"
  }
}

还有我们的咕噜咕噜文件.js：

module.exports = function(grunt) {
    grunt.initConfig({
        // contcatenation
        concat: {
            // javascript
            js: {
                src: ['src/**/*.js'],
                dest: 'bin/scripts.js',
                options: {
                    process: function(src, filepath) {
                        // do something here
                        return "'n/* " + filepath + " */'n" + src;
                    }
                }
            },
            // CSS
            css: {
                src: ['src/**/*.css'],
                dest: 'bin/styles.css',
                options: {
                    process: function(src, filepath) {
                        return src;
                    }
                }
            },
            // HTML templates
            html: {
                src: ['src/**/*.html', '!src/index.html'],
                dest: 'tmp/templates.html',
                options: {
                    process: function(src, filepath) {
                        return src;                     
                    }
                }
            }
        },
        // custom task for generating index.html (it's a single page app)
        'generate-index': {
            index: {
                src: '<%= concat.html.dest %>',
                dest: 'bin/index.html',
                template: 'src/index.html'
            }
        },
        // custom task for generating cache manifest file
        'generate-manifest': {
            manifest: {
                dest: 'bin/cache.manifest'
            }
        },
        // watching all the files and performa the specific tasks
        watch: {
            js: {
                files: ['<%= concat.js.src[0] %>'],
                tasks: ['concat:js', 'generate-manifest']
            },
            css: {
                files: ['<%= concat.css.src[0] %>'],
                tasks: ['concat:css', 'generate-manifest']
            },
            html: {
                files: ['<%= concat.html.src[0] %>'],
                tasks: ['concat:html', 'generate-index', 'generate-manifest']
            },
            img: {
                files: ['bin/img/**/*.png', 'bin/img/**/*.jpg', 'bin/img/**/*.gif'],
                tasks: ['generate-manifest']    
            }
        }
    });
    // loading modules
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadTasks('tasks');
    // grunt.registerTask('default', ['concat', 'less']);
    grunt.registerTask('default', ['concat', 'generate-index', 'generate-manifest', 'watch']);
}

一件事是JavaScript源映射，它允许你提供一个大文件，以及它们如何组合的信息。如果浏览器支持源映射，它将显示缩小和合并的文件，就好像它没有被缩小和合并一样。为了实现这一点，它使用源映射的信息加载原始源文件。据我所知，原始文件仅在需要时才加载（显示在脚本视图中）。

您可以做的另一件事是使用例如一天expire标头，并在您的断言前面加上内部版本号。如果在代码更改时重新生成代码，则会生成新的内部版本号。这样，只有当更改完成时，js代码才会重新加载，否则将从浏览器缓存中读取。这样，只有更改后的初始加载速度会变慢，但为了测试页面，页面会再次流畅运行。

相关文章：