grunt with webpack如何处理不需要定义

Question

是的，我是前端菜鸟，对于ReactJS，grunt和webpack来说都是新手。尽管我付出了最大的努力，我仍试图利用stripe react package。我遇到了可怕的“require is not defined”错误消息。我很清楚浏览器无法解释require语句，我需要使用webpack或browserfy来处理（我使用webpack）。这是我的Gruntfile ...我错过了什么或做错了什么？

module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    dirs: {
        src: 'public/js/src',
        dest: 'public/js/build',
    },
    uglify: {
        options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
        },
        build: {
            src: '<%= dirs.dest %>/<%= pkg.name %>.js',
            dest: '<%= dirs.dest %>/<%= pkg.name %>.min.js'
        },
    },
    babel: {
        options: {
            sourceMap: true,
        },
        dist: {
            files: {
                '<%= dirs.dest %>/utils.js': '<%= dirs.src %>/utils.js',
                '<%= dirs.dest %>/common.js': '<%= dirs.src %>/common.js',
                '<%= dirs.dest %>/home.js': '<%= dirs.src %>/home.js',
                '<%= dirs.dest %>/procedures.js': '<%= dirs.src %>/procedures.js',
                '<%= dirs.dest %>/procedure.js': '<%= dirs.src %>/procedure.js',
                '<%= dirs.dest %>/create.js': '<%= dirs.src %>/create.js',
                '<%= dirs.dest %>/edit.js': '<%= dirs.src %>/edit.js',
                '<%= dirs.dest %>/account.js': '<%= dirs.src %>/account.js',
                '<%= dirs.dest %>/dashboard.js': '<%= dirs.src %>/dashboard.js',
                '<%= dirs.dest %>/register.js': '<%= dirs.src %>/register.js',
                '<%= dirs.dest %>/providerProfiles.js': '<%= dirs.src %>/providerProfiles.js',
                '<%= dirs.dest %>/createProfile.js': '<%= dirs.src %>/createProfile.js',
                '<%= dirs.dest %>/providerProfile.js': '<%= dirs.src %>/providerProfile.js',
                '<%= dirs.dest %>/editProviderProfile.js': '<%= dirs.src %>/editProviderProfile.js',
                '<%= dirs.dest %>/userManagement.js': '<%= dirs.src %>/userManagement.js',
                '<%= dirs.dest %>/createUser.js': '<%= dirs.src %>/createUser.js',
                '<%= dirs.dest %>/editUser.js': '<%= dirs.src %>/editUser.js',
                '<%= dirs.dest %>/forgotPassword.js': '<%= dirs.src %>/forgotPassword.js',
                '<%= dirs.dest %>/passwordRecovery.js': '<%= dirs.src %>/passwordRecovery.js',
                '<%= dirs.dest %>/admin.js': '<%= dirs.src %>/admin.js',
                '<%= dirs.dest %>/procedureTemplates.js': '<%= dirs.src %>/procedureTemplates.js',
                '<%= dirs.dest %>/procedureTemplate.js': '<%= dirs.src %>/procedureTemplate.js',
            },
        },
    },

    webpack: {

        build: {
          entry: ['./public/js/src/register.js'],
          output: {
            path:  __dirname + 'public/js/build',
            filename: 'register.js'
          },
          target: 'web',
          stats: {
            colors: true,
            modules: true,
            reasons: true
          },
          storeStatsTo: 'webpackStats',
          progress: true,
          failOnError: true,
          watch: false,
          module: {
            loaders: [
              { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
            ]
          }
        }
      },


    watch: {
        files: ['<%= dirs.src %>/*.js'],
        tasks: ['default'],
        options: {
            spawn: false,
        },
    },
    concat: {
        options: {
            separator: ';',
        },
        dist: {
            src: [
                '<%= dirs.dest %>/utils.js',
                '<%= dirs.dest %>/common.js',
                '<%= dirs.dest %>/home.js',
                '<%= dirs.dest %>/procedures.js',
                '<%= dirs.dest %>/procedure.js',
                '<%= dirs.dest %>/create.js',
                '<%= dirs.dest %>/edit.js',
                '<%= dirs.dest %>/account.js',
                '<%= dirs.dest %>/dashboard.js',
                '<%= dirs.dest %>/register.js',
                '<%= dirs.dest %>/createProfile.js',
                '<%= dirs.dest %>/providerProfiles.js',
                '<%= dirs.dest %>/providerProfile.js',
                '<%= dirs.dest %>/editProviderProfile.js',
                '<%= dirs.dest %>/admin.js',
                '<%= dirs.dest %>/createUser.js',
                '<%= dirs.dest %>/editUser.js',
                '<%= dirs.dest %>/forgotPassword.js',
                '<%= dirs.dest %>/passwordRecovery.js',
                '<%= dirs.dest %>/userManagement.js',
                '<%= dirs.dest %>/procedureTemplates.js',
                '<%= dirs.dest %>/procedureTemplate.js',

            ],
            dest: '<%= dirs.dest %>/<%= pkg.name %>.js'
        },
    },
});

// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Load the bebel plugin
grunt.loadNpmTasks('grunt-babel');
// Load the watch plugin
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-webpack');

// Load the concat plugin
grunt.loadNpmTasks('grunt-contrib-concat');

// Default task(s).
grunt.registerTask('default', ['webpack', 'babel', 'concat', 'uglify']);

};

Answer 1

不太确定它是什么，但是这里的Gruntfile.js有效：

module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    dirs: {
        src: 'public/js/src',
        dest: 'public/js/build',
    },
    uglify: {
        options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
        },
        build: {
            src: '<%= dirs.dest %>/<%= pkg.name %>.js',
            dest: '<%= dirs.dest %>/<%= pkg.name %>.min.js'
        },
    },
    babel: {
        options: {
            sourceMap: true,
        },
        dist: {
            files: {
                '<%= dirs.dest %>/utils.js': '<%= dirs.src %>/utils.js',
                '<%= dirs.dest %>/common.js': '<%= dirs.src %>/common.js',
                '<%= dirs.dest %>/home.js': '<%= dirs.src %>/home.js',
                '<%= dirs.dest %>/procedures.js': '<%= dirs.src %>/procedures.js',
                '<%= dirs.dest %>/procedure.js': '<%= dirs.src %>/procedure.js',
                '<%= dirs.dest %>/create.js': '<%= dirs.src %>/create.js',
                '<%= dirs.dest %>/edit.js': '<%= dirs.src %>/edit.js',
                '<%= dirs.dest %>/account.js': '<%= dirs.src %>/account.js',
                '<%= dirs.dest %>/dashboard.js': '<%= dirs.src %>/dashboard.js',
                //'<%= dirs.dest %>/register.js': '<%= dirs.dest %>/registerBuild.js',
                '<%= dirs.dest %>/providerProfiles.js': '<%= dirs.src %>/providerProfiles.js',
                '<%= dirs.dest %>/createProfile.js': '<%= dirs.src %>/createProfile.js',
                '<%= dirs.dest %>/providerProfile.js': '<%= dirs.src %>/providerProfile.js',
                '<%= dirs.dest %>/editProviderProfile.js': '<%= dirs.src %>/editProviderProfile.js',
                '<%= dirs.dest %>/userManagement.js': '<%= dirs.src %>/userManagement.js',
                '<%= dirs.dest %>/createUser.js': '<%= dirs.src %>/createUser.js',
                '<%= dirs.dest %>/editUser.js': '<%= dirs.src %>/editUser.js',
                '<%= dirs.dest %>/forgotPassword.js': '<%= dirs.src %>/forgotPassword.js',
                '<%= dirs.dest %>/passwordRecovery.js': '<%= dirs.src %>/passwordRecovery.js',
                '<%= dirs.dest %>/admin.js': '<%= dirs.src %>/admin.js',
                '<%= dirs.dest %>/procedureTemplates.js': '<%= dirs.src %>/procedureTemplates.js',
                '<%= dirs.dest %>/procedureTemplate.js': '<%= dirs.src %>/procedureTemplate.js',
            },
        },
    },

    webpack: {

        build: {
          entry: ['./public/js/src/register.js'],
          output: {
            path:  __dirname + '/public/js/build',
            filename: 'register.js'
          },
          target: 'web',
          stats: {
            colors: true,
            modules: true,
            reasons: true
          },
          storeStatsTo: 'webpackStats',
          progress: true,
          failOnError: true,
          watch: false,
          module: {
            loaders: [
              {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                query: {
                        presets: ['es2015', 'react'],
                      }
              }
            ]
          }
        }
      },


    watch: {
        files: ['<%= dirs.src %>/*.js'],
        tasks: ['default'],
        options: {
            spawn: false,
        },
    },
    concat: {
        options: {
            separator: ';',
        },
        dist: {
            src: [
                '<%= dirs.dest %>/utils.js',
                '<%= dirs.dest %>/common.js',
                '<%= dirs.dest %>/home.js',
                '<%= dirs.dest %>/procedures.js',
                '<%= dirs.dest %>/procedure.js',
                '<%= dirs.dest %>/create.js',
                '<%= dirs.dest %>/edit.js',
                '<%= dirs.dest %>/account.js',
                '<%= dirs.dest %>/dashboard.js',
                '<%= dirs.dest %>/register.js',
                '<%= dirs.dest %>/createProfile.js',
                '<%= dirs.dest %>/providerProfiles.js',
                '<%= dirs.dest %>/providerProfile.js',
                '<%= dirs.dest %>/editProviderProfile.js',
                '<%= dirs.dest %>/admin.js',
                '<%= dirs.dest %>/createUser.js',
                '<%= dirs.dest %>/editUser.js',
                '<%= dirs.dest %>/forgotPassword.js',
                '<%= dirs.dest %>/passwordRecovery.js',
                '<%= dirs.dest %>/userManagement.js',
                '<%= dirs.dest %>/procedureTemplates.js',
                '<%= dirs.dest %>/procedureTemplate.js',

            ],
            dest: '<%= dirs.dest %>/<%= pkg.name %>.js'
        },
    },
});

// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Load the bebel plugin
grunt.loadNpmTasks('grunt-babel');
// Load the watch plugin
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-webpack');

// Load the concat plugin
grunt.loadNpmTasks('grunt-contrib-concat');

// Default task(s).
grunt.registerTask('default', ['webpack', 'babel', 'concat', 'uglify']);

};