在 React JS 中需要带有变量的文件

本文介绍了在 React JS 中需要带有变量的文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试在路径中要求一个带有变量的文件.类似的东西

I'm trying to require a file with a variable in the path. Something like

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

langCode 可以是 fr、en、de、nl.因此，我想要得到的是例如

Where langCode can be fr, en, de, nl. Thus what I'm trying to get is for example

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

当我在最后键入它时没有变量，因此 require('../common/languages/en'); 效果很好.但是当我尝试使用 require('../common/languages/' + langCode); 时，它不起作用，langCode 的值无关紧要也是zh.

When I type it without variable at the end, thus require('../common/languages/en'); it works good. But when I try with require('../common/languages/' + langCode); it won't work, doesn't matter that the value of the langCode is also en.

我得到下一个错误:

bundle.js:1 未捕获的错误:找不到模块 '../common/languages/en'

更新

'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: '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']);

推荐答案

大部分 JS bundler 无法处理动态 require 机制.尝试加载所有语言并在运行时切换它们

Most of JS bundlers cannot handle dynamic require mechanism. Try to load all languages and switch them in runtime

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];