From 14f7ff13ec13e282480e1be779dc25f080cf5f4c Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 17 May 2018 09:28:31 +0900 Subject: [PATCH] #491 --- locales/index.ts | 2 +- src/build/i18n.ts | 17 +- webpack.config.ts | 393 +++++++++++++++++++++++----------------------- webpack/i18n.ts | 24 +++ 4 files changed, 229 insertions(+), 207 deletions(-) create mode 100644 webpack/i18n.ts diff --git a/locales/index.ts b/locales/index.ts index 926844766d..89d18190f6 100644 --- a/locales/index.ts +++ b/locales/index.ts @@ -14,7 +14,7 @@ const langs = { 'en': loadLang('en'), 'fr': loadLang('fr'), 'ja': native, - 'pl': loadLang('pl') + 'pl': loadLang('pl') }; Object.entries(langs).map(([, locale]) => { diff --git a/src/build/i18n.ts b/src/build/i18n.ts index 6c0f633ad9..212a5837dd 100644 --- a/src/build/i18n.ts +++ b/src/build/i18n.ts @@ -7,7 +7,7 @@ import locale from '../../locales'; export default class Replacer { private lang: string; - public pattern = /%i18n:([a-z0-9_\-@\.\!]+?)%/g; + public pattern = /%i18n:([a-z0-9_\-\.\!]+?)%/g; constructor(lang: string) { this.lang = lang; @@ -53,23 +53,20 @@ export default class Replacer { } } - public replacement(ctx, match, key) { - const client = '/src/client/app/'; - let name = null; + public replacement(match, key) { + let path = null; const shouldEscape = key[0] == '!'; if (shouldEscape) { key = key.substr(1); } - if (key[0] == '@') { - name = ctx.src.substr(ctx.src.indexOf(client) + client.length); - key = key.substr(1); + if (key.indexOf('|') != -1) { + path = key.split('|')[0]; + key = key.split('|')[1]; } - if (ctx && ctx.lang) this.lang = ctx.lang; - - const txt = this.get(name, key); + const txt = this.get(path, key); return shouldEscape ? txt.replace(/'/g, '\\x27').replace(/"/g, '\\x22') diff --git a/webpack.config.ts b/webpack.config.ts index 0e12fda633..3ac3c4e297 100644 --- a/webpack.config.ts +++ b/webpack.config.ts @@ -11,8 +11,10 @@ const minifyHtml = require('html-minifier').minify; const WebpackOnBuildPlugin = require('on-build-webpack'); //const HardSourceWebpackPlugin = require('hard-source-webpack-plugin'); const ProgressBarPlugin = require('progress-bar-webpack-plugin'); +const I18nPlugin = require('webpack-multilang-i18n-plugin'); import I18nReplacer from './src/build/i18n'; +import { pattern as i18nPattern, replacement as i18nReplacement } from './webpack/i18n'; import { pattern as faPattern, replacement as faReplacement } from './src/build/fa'; const constants = require('./src/const.json'); import config from './src/config'; @@ -37,183 +39,155 @@ global['collapseSpacesReplacement'] = html => { global['base64replacement'] = (_, key) => { return fs.readFileSync(__dirname + '/src/client/' + key, 'base64'); }; + +global['i18nReplacement'] = i18nReplacement; + //#endregion const langs = Object.keys(locales); -// 無圧縮スクリプトを用意するのは重いので一時的に無効化 -//const entries = process.env.NODE_ENV == 'production' -// ? langs.map(l => [l, false]).concat(langs.map(l => [l, true])) -// : langs.map(l => [l, false]); -const entries = process.env.NODE_ENV == 'production' - ? langs.map(l => [l, true]) - : langs.map(l => [l, false]); +const isProduction = process.env.NODE_ENV == 'production'; -module.exports = entries.map(x => { - const [lang, isProduction] = x; +// Entries +const entry = { + desktop: './src/client/app/desktop/script.ts', + mobile: './src/client/app/mobile/script.ts', + //stats: './src/client/app/stats/script.ts', + //status: './src/client/app/status/script.ts', + dev: './src/client/app/dev/script.ts', + auth: './src/client/app/auth/script.ts', + sw: './src/client/app/sw.js' +}; - // Chunk name - const name = lang; +const output = { + path: __dirname + '/built/client/assets', + filename: `[name].${version}.-.${isProduction ? 'min' : 'raw'}.js` +}; - // Entries - const entry = { - desktop: './src/client/app/desktop/script.ts', - mobile: './src/client/app/mobile/script.ts', - //ch: './src/client/app/ch/script.ts', - //stats: './src/client/app/stats/script.ts', - //status: './src/client/app/status/script.ts', - dev: './src/client/app/dev/script.ts', - auth: './src/client/app/auth/script.ts', - sw: './src/client/app/sw.js' - }; +//#region Define consts +const consts = { + _RECAPTCHA_SITEKEY_: config.recaptcha.site_key, + _SW_PUBLICKEY_: config.sw ? config.sw.public_key : null, + _THEME_COLOR_: constants.themeColor, + _COPYRIGHT_: constants.copyright, + _VERSION_: version, + _CODENAME_: codename, + _STATUS_URL_: config.status_url, + _STATS_URL_: config.stats_url, + _DOCS_URL_: config.docs_url, + _API_URL_: config.api_url, + _WS_URL_: config.ws_url, + _DEV_URL_: config.dev_url, + _LANG_: '%lang%', + _HOST_: config.host, + _HOSTNAME_: config.hostname, + _URL_: config.url, + _LICENSE_: licenseHtml, + _GOOGLE_MAPS_API_KEY_: config.google_maps_api_key +}; - const output = { - path: __dirname + '/built/client/assets', - filename: `[name].${version}.${lang}.${isProduction ? 'min' : 'raw'}.js` - }; +const _consts = {}; - const i18nReplacer = new I18nReplacer(lang as string); - global['i18nReplacement'] = i18nReplacer.replacement; +Object.keys(consts).forEach(key => { + _consts[key] = JSON.stringify(consts[key]); +}); +//#endregion - //#region Define consts - const consts = { - _RECAPTCHA_SITEKEY_: config.recaptcha.site_key, - _SW_PUBLICKEY_: config.sw ? config.sw.public_key : null, - _THEME_COLOR_: constants.themeColor, - _COPYRIGHT_: constants.copyright, - _VERSION_: version, - _CODENAME_: codename, - _STATUS_URL_: config.status_url, - _STATS_URL_: config.stats_url, - _DOCS_URL_: config.docs_url, - _API_URL_: config.api_url, - _WS_URL_: config.ws_url, - _DEV_URL_: config.dev_url, - _LANG_: lang, - _HOST_: config.host, - _HOSTNAME_: config.hostname, - _URL_: config.url, - _LICENSE_: licenseHtml, - _GOOGLE_MAPS_API_KEY_: config.google_maps_api_key - }; +const plugins = [ + //new HardSourceWebpackPlugin(), + new ProgressBarPlugin({ + format: chalk` {cyan.bold yes we can} {bold [}:bar{bold ]} {green.bold :percent} {gray (:current/:total)} :elapseds`, + clear: false + }), + new webpack.DefinePlugin(_consts), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(isProduction ? 'production' : 'development') + }), + new WebpackOnBuildPlugin(stats => { + fs.writeFileSync('./built/client/meta.json', JSON.stringify({ + version + }), 'utf-8'); - const _consts = {}; + //#region i18n + langs.forEach(lang => { + Object.keys(entry).forEach(file => { + let src = fs.readFileSync(`${__dirname}/built/client/assets/${file}.${version}.-.${isProduction ? 'min' : 'raw'}.js`, 'utf8'); - Object.keys(consts).forEach(key => { - _consts[key] = JSON.stringify(consts[key]); - }); - //#endregion + const i18nReplacer = new I18nReplacer(lang); - const plugins = [ - //new HardSourceWebpackPlugin(), - new ProgressBarPlugin({ - format: chalk` {cyan.bold yes we can} {bold [}:bar{bold ]} {green.bold :percent} {gray (:current/:total)} :elapseds`, - clear: false - }), - new webpack.DefinePlugin(_consts), - new webpack.DefinePlugin({ - 'process.env.NODE_ENV': JSON.stringify(isProduction ? 'production' : 'development') - }), - new WebpackOnBuildPlugin(stats => { - fs.writeFileSync('./built/client/meta.json', JSON.stringify({ - version - }), 'utf-8'); - }), - new VueLoaderPlugin() - ]; + src = src.replace(i18nReplacer.pattern, i18nReplacer.replacement); + src = src.replace('%lang%', lang); - if (isProduction) { - plugins.push(new webpack.optimize.ModuleConcatenationPlugin()); - } + fs.writeFileSync(`${__dirname}/built/client/assets/${file}.${version}.${lang}.${isProduction ? 'min' : 'raw'}.js`, src, 'utf8'); + }); + }); + //#endregion + }), + new VueLoaderPlugin(), + new I18nPlugin() +]; - return { - name, - entry, - module: { - rules: [{ - test: /\.vue$/, - exclude: /node_modules/, - use: [{ - loader: 'vue-loader', - options: { - cssSourceMap: false, - compilerOptions: { - preserveWhitespace: false - } +if (isProduction) { + plugins.push(new webpack.optimize.ModuleConcatenationPlugin()); +} + +module.exports = { + entry, + module: { + rules: [{ + test: /\.vue$/, + exclude: /node_modules/, + use: [{ + loader: 'vue-loader', + options: { + cssSourceMap: false, + compilerOptions: { + preserveWhitespace: false } - }, { - loader: 'replace', - query: { - search: /%base64:(.+?)%/g.toString(), - replace: 'base64replacement' - } - }, { - loader: 'replace', - query: { - search: i18nReplacer.pattern.toString(), - replace: 'i18nReplacement', - i18n: true, - lang - } - }, { - loader: 'replace', - query: { - search: faPattern.toString(), - replace: 'faReplacement' - } - }, { - loader: 'replace', - query: { - search: /^