在React中需要帶有變量的文件JS

Question

我試圖要求路徑中具有變量的文件。喜歡的東西

const langCode = this.props.langCode; // en 
let languageFile = require('../common/languages/' + langCode); 

凡的langCode可FR，EN，德，NL。因此，我想要得到的是例如

require('../common/languages/en'); 

當我在最後不變量鍵入，從而require('../common/languages/en');它的作品好。但是，當我嘗試使用require('../common/languages/' + langCode);時，它將無法工作，無關緊要的是，langCode的值也是en。

我得到一個錯誤：

bundle.js：1個未捕獲的錯誤：無法找到模塊 '../common/languages/en'

UPDATE

'use strict'; 

var gulp = require('gulp'); 
var connect = require('gulp-connect'); 
var open = require('gulp-open'); 
var browserify = require('browserify'); 
var source = require('vinyl-source-stream'); 
var concat = require('gulp-concat'); 
var babelify = require('babelify'); 
var sass = require('gulp-sass'); 
var merge = require('merge-stream'); // Merge all styles (css, sass and less) in one big bundle 
var lint = require("gulp-eslint"); 

var config = { 
    port: 8001, 
    devBaseUrl: 'http://localhost', 
    paths: { 
     html: "./src/*.html", 
     externals: "./src/assets/externals/*.js", 
     js: "./src/**/*.js", 
     images: './src/assets/images/**/*', 
     fonts: './src/assets/css/fonts/*', 
     css: [ 
      "./src/assets/css/*.css", 
      "./node_modules/toastr/package/toastr.css" 
     ], 
     sass: './src/assets/css/*.scss', 
     dist: "./dist", 
     mainJS: "./src/main.js" 
    } 
}; 


gulp.task('connect', ['watch'], function() { 
    connect.server({ 
     root: ['dist'], 
     port: config.port, 
     base: config.devBaseUrl, 
     livereload: true, 
     fallback: './dist/index.html' 
    }) 
}); 

gulp.task('open', ['connect'], function() { 
    gulp.src('dist/index.html') 
     .pipe(open({uri: config.devBaseUrl + ":" + config.port + "/"})); 
}); 


gulp.task('html', function() { 
    gulp.src(config.paths.html) 
     .pipe(gulp.dest(config.paths.dist)) 
     .pipe(connect.reload()); 
}); 


gulp.task('externals', function() { 
    gulp.src(config.paths.externals) 
     .on('error', console.error.bind(console)) 
     .pipe(concat('external.js')) 
     .pipe(gulp.dest(config.paths.dist + '/externals')) 
     .pipe(connect.reload()); 
}); 


gulp.task('js', function() { 
    browserify(config.paths.mainJS) 
     .transform('babelify', {presets: ['es2015', 'react']}) 
     .bundle() 
     .on('error', console.error.bind(console)) 
     .pipe(source('bundle.js')) 
     .pipe(gulp.dest(config.paths.dist + '/scripts')) 
     .pipe(connect.reload()); 
}); 


gulp.task('images', function() { 
    gulp.src(config.paths.images) 
     .pipe(gulp.dest(config.paths.dist + '/images')); 
}); 


gulp.task('styles', function() { 
    var cssStyles = gulp.src(config.paths.css) 
     .pipe(concat('styles.css')); 

    var sassStyles = gulp.src(config.paths.sass) 
     .pipe(sass()) 
     .pipe(concat('styles.scss')); 

    var mergedStream = merge(cssStyles, sassStyles) 
     .pipe(concat('bundle.css')) 
     .pipe(gulp.dest(config.paths.dist + '/css')) 
     .pipe(connect.reload()); 

    return mergedStream; 
}); 

gulp.task('fonts', function() { 
    gulp.src(config.paths.fonts) 
     .pipe(gulp.dest(config.paths.dist + '/css/fonts')); 
}); 

gulp.task('lint', function() { 
    return gulp.src(config.paths.js) 
     .pipe(lint()) 
     .pipe(lint.format()); 
}); 


gulp.task('watch', function() { 
    gulp.watch(config.paths.html, ['html']); 
    gulp.watch(config.paths.js, ['js', 'lint']); 
    gulp.watch(config.paths.externals, ['externals', 'lint']); 
    gulp.watch([config.paths.css, config.paths.sass], ['styles']); 
    gulp.watch(config.paths.images, ['images']); 
}); 

gulp.task('default', ['html', 'js', 'styles', 'externals', 'images', 'fonts', 'lint', 'open', 'watch']); 

Answer 1

大多數JS捆綁器無法處理動態的需求機制。 嘗試加載所有語言並在運行時切換它們

let languages = { 
    en: require('../common/languages/en'), 
    ru: require('../common/languages/ru'), 
    de: require('../common/languages/de') 
} 
const langCode = this.props.langCode; // en 
let languageFile = languages[langCode]; 

Answer 2

你使用webpack作爲你的捆綁商嗎？

如果是這樣你需要知道它的dynamic requires mechanism。

Here is an issue討論它。