reactjs - 与 Grunt 和 Babelify 不工作的反应

Question

我刚开始在 JSX 中使用 React 进行学习和开发。我想使用 Grunt 来构建文件。我有以下文件夹结构：

Project root/
 |
 +-- src/
 |   |
 |   +-- js/
 |   +-- jsx/
 |
 +-- js/

基本上，我使用/src/jsx文件夹内的组件类创建 JSX 文件。然后我想使用带有Browserify的Babelify将每个单独的文件转换为 js 文件，该文件将位于/src/js文件夹内。然后我想将这些文件捆绑到一个文件中并将其缩小并/js使用UglifyJS.

我的Gruntfile.js样子是这样的：

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
        compress: {
          keep_fnames: true
        },
        mangle: {
          keep_fnames: true
        }
      },
      build: {
        src: 'src/js/*.js',
        dest: 'js/build.min.js'
      }
    },
    browserify: {
      dist: {
        files: [{
          expand: true,
          cwd: 'src/jsx',
          src: ['*.jsx'],
          dest: 'src/js',
          ext: '.js'
        }],
        options: {
          transform: [['babelify', { presets: "react-app/prod" }]],
          browserifyOptions: {
            debug: false
          }
        }
      }
    }
  });

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

  grunt.registerTask('default', [
    'browserify:dist',
    'uglify'
  ]);
};

但是当我grunt从项目目录运行并加载页面时，我收到以下错误：

build.min.js:3 Uncaught ReferenceError: PageLayout is not defined
    at Object.1 (build.min.js:3)
    at o (build.min.js:3)
    at r (build.min.js:3)
    at build.min.js:3

我的 React 类看起来有点像这样：

class PageLayout extends React.Component {
  render() {
    return (
      <page-layout>
        <Navbar brandName="MyBrand" />
        <MainView />
      </page-layout>
    )
  }
}

（Navbar并且MainView是也在单独的 JSX 文件中定义的组件）

我进行了调查，发现文件夹中 Babelify 生成的文件在 IIFE 中有/src/js这些类。所以问题是这些类不是全局可访问的。

现在我的问题是：我该如何解决这个问题？Grunt 或其他工具是否有更好的工作流程？这些工具对我来说并不重要，只要它们在 Windows 上运行并且可以编译我的文件。

标签： reactjsgruntjsbabeljsbrowserify