用于混合风格项目的 browserify (grunt, reactjs + plain js)

Question

对于将 reactjs 与普通 javascript 一起使用的项目，在 grunt 中配置 browserify 插件的最佳方法是什么？ IE。假设我想在我的项目和目录结构中的每个 js 文件中使用 require(...) 如下所示：

/js/model/foo.js (plain javascript)
/js/model/... (plain javascript)
/js/services/foo-service.js (plain javascript)
/js/view/foo-item-view.jsx (reactjs)
/js/view/... (reactjs)
/js/main.js (plain javascript, entry point)
etc.

我想对 /js/view/... 目录中的所有文件应用 reactjs 转换，然后使用 browserify 转换所有内容。我找不到干净的方法来做到这一点。

有可能吗？

更新:

好吧，我觉得我的问题有点不清楚。我知道这绝对是可行的，这就是我现在正在做的事情（对我来说这看起来像是 hack）：

// Project configuration.
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  watch: {
    scripts: {
      files: ['web/js/**/*.js', 'web/html/index.html'],
      tasks: ['copy', 'react', 'browserify']
    }
  },
  copy: {
    main: {
      files: [
        {
          src: 'web/html/index.html',
          dest: 'target/web/index.html'
        },
        {
          cwd: 'web/js',                // source js dir
          src: ['**', '!**/*.jsx'],     // copy all files and subfolders to the temporary dor, except for jsx
          dest: 'target/web/tmp/js',    // destination folder, used by browserify
          expand: true                  // required when using cwd
        }
      ]
    }
  },
  react: {
    dynamic_mappings: {
      files: [
        {
          expand: true,
          cwd: 'web/js/view',
          src: ['**/*.jsx'],
          dest: 'target/web/tmp/js/view',
          ext: '.js'
        }
      ]
    }
  },
  browserify: {
    dist: {
      files: {
        'target/web/js/app.js': ['target/web/tmp/js/main.js'],
      }
    }
  }
});

这对我来说看起来不太优雅，因为在 browserify 任务中有额外的副本而不是 'reactifying' 源。可能是我遗漏了什么，这个解决方案可以简化吗？

Answer 1

您可以运行 jsx 转换所有内容。它不会对常规 JavaScript 代码做任何事情。

除此之外的任何内容都是优化，但只需使用 watchify（或 watchify g运行t 插件），您不会注意到。

回应评论和编辑...你真的需要 g运行t 吗？

npm i -D browserify watchify reactify

然后在你的 package.json:

  "scripts": {
    "build": "browserify src/main.js -o dist/bundle.js",
    "watch": "watchify src/main.js -o dist/bundle.js"
  },
  "browserify": {
    "transform": ["reactify"]
  }

你也可以让所有的东西都是.js，我觉得这样更简单。如果您需要其他一些东西，例如 css 预处理器、图像压缩、精灵表、运行ning 测试等，您应该使用像 grunt/gulp 这样的工具。

对于 browserify，我发现单独使用 watchify 更容易。

用于混合风格项目的 browserify (grunt, reactjs + plain js)

browserify for mixed-style project (grunt, reactjs + plain js)

javascript

browserify

gruntjs

reactjs