【发布时间】：2017-11-02 18:47:56
【问题描述】：
是的，我是前端新手，对 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']);
};
【问题讨论】：
-
你从哪里得到错误？您是如何在 HTML 中包含 JS 的？
-
我有这行代码： import StripeCheckout from 'react-stripe-checkout';我在检查时看到控制台内部的错误。