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在/src/js文件夹中生成的文件在IIFE中包含这些类。因此，问题在于这些类无法全局访问。

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

与Grunt和Babelify反应无法正常工作

0 个答案: