0
예, 전 프론트 엔드 멍청이이고, ReactJS, grunt 및 webpack에 대한 새로운 지식이 있습니다. 최선의 노력에도 불구하고 stripe react package을 사용하려고합니다. 나는 두려워하는 "require not defined"오류 메시지가 나타납니다. 브라우저가 require 문을 해석 할 수 없다는 것을 잘 알고 있으며 webpack 또는 browserfy를 사용하여이를 처리해야합니다 (webpack과 함께). 여기 내 Gruntfile은 ... 무엇을 놓치고 잘못 했나요?webpack을 사용하는 grunt 처리 방법 정의가 필요하지 않습니다.
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']);
}};
어디서 오류가 있습니까? JS를 HTML에 어떻게 포함시키고 있습니까? – SLaks
다음 코드 줄이 있습니다 : import StripeCheckout from 'react-stripe-checkout'; 검사하는 동안 콘솔 내부에 오류가 표시됩니다. – albeethekid