RequireJS - 使插件成为默认加载器答案

【问题标题】：RequireJS - make plugin a default loaderRequireJS - 使插件成为默认加载器
【发布时间】：2015-02-01 06:57:44
【问题描述】：

我们的代码库将逐渐转向 React 框架，使用令人难以置信的 JSX Transformer。

JSX Transformer对于普通的Javascript文件是幂等的，将JSX方言转译成Javascript。因此，我想避免写“jsx！”在每个依赖项之前 - 我希望 JSX 成为 RequireJS 的默认加载器。

这在 RequireJS 中可行吗？

【问题讨论】：

作为替代方案，使用 jsx 命令行工具预编译模块（我不知道 require.js，但这似乎是最简单的解决方案）。
我在这个问题上工作了一段时间，但一直未能找到一种简单的方法来解决这个问题，同时仍能从 RequireJS 的开发时工具中获益。我们正在考虑切换到基于 webpack 的构建系统。

标签： requirejs reactjs

【解决方案1】：

您可以使用 grunt + browserify + reactify 轻松编译所有 React 文件。这是执行此操作的基本 grunt 配置：

module.exports = function(grunt) { 'use strict';

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    // Task configuration goes here.
    paths: {},
    browserify: {
      options: {
        transform: ['reactify'],
      },
      dev: {
        src: '<%= paths.src_js %>/app/app.jsx',
        dest: '<%= paths.build_js %>/app.js',
        options: { debug: true }
      },
      prod: {
        src: '<%= browserify.dev.src %>',
        dest: '<%= paths.build_js %>/app.min.js',
        options: { debug: false },
      }
    },
    watch: {
      options: { livereload: true },
      browserify: {
        files: ['<%= paths.src_js %>/app/**/*'],
        tasks: ['browserify:dev'],
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-browserify');

  grunt.registerTask('dev',  ['browserify:dev']);
  grunt.registerTask('prod',  ['browserify:prod']);
};

您通过grunt dev 或grunt prod 运行它。

【讨论】：

这是我们最终使用的解决方案 - 用于生产构建。为日常开发工作执行此操作有些笨拙 - 如果监视任务未运行，您的前端将不会更新。有时 watch + compile 有点慢，并且在您重新加载页面时还没有完成编译。
我将它用于开发和生产。当使用 livereload 插件完成构建时，grunt watch 现在需要大约 1.5 秒和浏览器自动重新加载。我遇到了一些问题以使 grunt watch 快速，并使多个独立的 watch 任务仅编译必要的文件起到了作用。