Реакция с Grunt и Babelify не работает - PullRequest
Новая
       84

Реакция с Grunt и Babelify не работает

0 голосов
/ 21 февраля 2019

Я только начал изучать и разрабатывать, используя React в JSX.Я хочу использовать Grunt для создания файлов.У меня следующая структура папок: 

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

По сути, я создаю JSX-файлы с классами компонентов внутри папки /src/jsx.Затем я хочу преобразовать каждый отдельный файл в файл js, используя Babelify с Browserify , который попадет в папку /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 и могут компилировать мои файлы.

...