我有一些项目使用 RequireJS在浏览器中加载单个 JavaScript 模块，但我还没有优化它们。在开发和生产中，应用程序对每个 JavaScript 文件发出单独的请求，现在我想使用 Grunt 来解决这个问题。 .

我试图整理一个简单的项目结构无济于事，所以我想知道是否有人可以为我提供一个工作示例。我的目标如下:

1. 在开发模式下，通过对每个所需模块发出单独的请求，一切都可以在浏览器中运行。 在开发模式下不需要繁琐的任务或串联。
2. 当我准备好后，我可以运行一个 grunt 任务来优化(组合)所有使用 r.js 的 JavaScript 文件。并在本地进行测试。一旦我确信优化后的应用程序可以正常运行，我就可以部署它。

以下是本次对话的示例结构:

grunt-requirejs-example/
  grunt.js
  main.js (application entry point)
  index.html (references main.js)
  lib/ (stuff that main.js depends on)
    a.js
    b.js
    requirejs/
      require.js
      text.js
  build/ (optimized app goes here)
  node_modules/ (necessary grunt tasks live here)

具体来说，我正在寻找一个可以开始的工作项目结构。我的主要问题是:

1. 如果这个项目结构有缺陷，您有什么建议？
2. 我的 grunt.js 文件中究竟需要什么，尤其是要让 r.js 优化器正常工作？
3. 如果所有这些工作都不值得，并且有一种方法可以使用 grunt watch 任务在我每次保存文件时自动在开发模式下构建所有内容，那么我会全力以赴.我想避免任何会减慢循环从进行更改到在浏览器中看到它的事情。

最佳答案

我使用 grunt-contrib-requirejs基于 require.js 构建项目的任务。将其安装在您的项目目录中:

npm install grunt-contrib-requirejs --save-dev

顺便说一句:--save-dev 会将包添加到您的 package.json 中的开发依赖项中。如果您没有在项目中使用 package.json，请忽略它。

在你的 grunt 文件中加载任务:

grunt.loadNpmTasks('grunt-contrib-requirejs');

并将配置添加到您的 grunt.initConfig

requirejs: {
  production: {
    options: {
      baseUrl: "path/to/base",
      mainConfigFile: "path/to/config.js",
      out: "path/to/optimized.js"
    }
  }
}

现在您可以通过运行 grunt requirejs

您可以将一组不同的任务捆绑到某种主要任务中，方法是将其添加到您的 grunt 文件中

grunt.registerTask('default', ['lint', 'requirejs']); 

有了这个，你可以简单地输入 grunt 并且 grunt 会自动运行带有两个“子任务”的默认任务:lint 和 requirejs。

如果你需要一个特殊的生产任务:像上面那样定义它

grunt.registerTask('production', ['lint', 'requirejs', 'less', 'copy']);

并使用

grunt production

如果您需要不同的“生产”和“开发”行为，即 requirejs 任务，您可以使用所谓的目标。在上面的配置示例中，它已经定义为 production。如果需要，您可以添加另一个目标(顺便说一句，您可以通过在同一级别添加选项对象来为所有目标定义全局配置)

requirejs: {
  // global config
  options: {
    baseUrl: "path/to/base",
    mainConfigFile: "path/to/config.js"
  },
  production: {
    // overwrites the default config above
    options: {
      out: "path/to/production.js"
    }
  },
  development: {
    // overwrites the default config above
    options: {
      out: "path/to/development.js",
      optimize: none // no minification
    }
  }
}

现在您可以使用 grunt requirejs 同时运行它们，也可以使用 grunt requirejs:production 单独运行它们，或者您在不同的任务中定义它们:

grunt.registerTask('production', ['lint', 'requirejs:production']);
grunt.registerTask('development', ['lint', 'requirejs:development']);

现在回答你的问题:

1. 我肯定会在您的项目中使用子文件夹。在我的例子中，我使用一个“src”文件夹进行开发，该文件夹构建到一个用于生产的“htdocs”文件夹中。我喜欢的项目布局是:

   project/
     src/
       js/
         libs/
           jquery.js
           ...
         appname/
           a.js
           b.js
           ...
         main.js // require.js starter
       index.html
       ...
     build/
       ... //some tmp folder for the build process
     htdocs/
       ... // production build
     node_modules/
       ...
     .gitignore
     grunt.js
     package.json
   

2. 见上文

3. 你可以这样做，但我不建议将 requirejs 添加到 watch 任务中，这是一个资源消耗的任务，它会显着降低你的机器速度。

最后但同样重要的是:在玩 r.js 时要非常小心。特别是当您想通过在配置中添加 modules 指令来使用 r.js 优化整个项目时。 R.js 将在不询问的情况下删除输出目录。如果碰巧它被意外配置为您的系统根目录，r.js 将删除您的硬盘。请注意，前段时间我在设置 grunt 任务时永久删除了整个 htdocs 文件夹...在使用 r.js 配置时，请始终将 keepBuildDir:true 添加到您的选项中。

关于javascript - 使用 grunt.js 使用 RequireJS 组合 JavaScript 文件的工作项目结构？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13567312/