Gulp React JS中需要具有变量的文件

mwecs4sa  于 2022-12-08  发布在  Gulp
关注(0)|答案(3)|浏览(117)

我试图要求一个路径中有变量的文件。

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

其中langCode可以是fr,en,de,nl。因此,我试图得到的是例如

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

当我输入它的时候,在结尾没有变量,因此require('../common/languages/en');它工作得很好。但是当我尝试使用require('../common/languages/' + langCode);时,它就不工作了,不管langCode的值也是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: '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']);
0qx6xfy6

0qx6xfy61#

大多数JS捆绑器无法处理动态require机制,请尝试加载所有语言并在运行时切换

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

cuxqih212#

您是否使用Webpack作为捆绑包?
如果是这样的话,你需要知道它是dynamic requires mechanism
Here is an issue讨论它。

t98cgbkg

t98cgbkg3#

在express.js服务器中,设置一个包含任意static.filestatic directory

const express = require('express')
const app = express()
app.use(express.static(path.join(__dirname, '../path_to/..', staticImages)))

React天然组分:

return <Image source={{ uri: `http://192.168.0.1:3345/${'staticImage.jpg'}`}} />

相关问题