Refactoring
This commit is contained in:
parent
e237c53766
commit
fb70e3b176
12 changed files with 202 additions and 121 deletions
|
@ -132,8 +132,11 @@ gulp.task('build:client', [
|
|||
]);
|
||||
|
||||
gulp.task('webpack', done => {
|
||||
const output = childProcess.execSync(Path.join('.', 'node_modules', '.bin', 'webpack') + ' --config webpack.config.ts', );
|
||||
const output = childProcess.execSync(
|
||||
Path.join('.', 'node_modules', '.bin', 'webpack') + ' --config ./webpack/webpack.config.ts');
|
||||
|
||||
console.log(output.toString());
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
|
|
|
@ -1,120 +0,0 @@
|
|||
/**
|
||||
* webpack config
|
||||
*/
|
||||
|
||||
import * as fs from 'fs';
|
||||
import * as webpack from 'webpack';
|
||||
const StringReplacePlugin = require('string-replace-webpack-plugin');
|
||||
import * as yaml from 'js-yaml';
|
||||
|
||||
import version from './src/version';
|
||||
const constants = require('./src/const.json');
|
||||
|
||||
const languages = {
|
||||
'en': yaml.safeLoad(fs.readFileSync('./locales/en.yml', 'utf-8')),
|
||||
'ja': yaml.safeLoad(fs.readFileSync('./locales/ja.yml', 'utf-8'))
|
||||
};
|
||||
|
||||
const native = languages.ja;
|
||||
|
||||
const env = process.env.NODE_ENV;
|
||||
const isProduction = env === 'production';
|
||||
|
||||
module.exports = (Object as any).entries(languages).map(([lang, locale]) => {
|
||||
locale = Object.assign({}, native, locale);
|
||||
|
||||
const pack /*: webpack.Configuration ← fuck wrong type definition!!! */ = {
|
||||
name: lang,
|
||||
entry: {
|
||||
'desktop': './src/web/app/desktop/script.js',
|
||||
'mobile': './src/web/app/mobile/script.js',
|
||||
'dev': './src/web/app/dev/script.js',
|
||||
'auth': './src/web/app/auth/script.js'
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
enforce: 'pre',
|
||||
test: /\.(tag|js)$/,
|
||||
exclude: /node_modules/,
|
||||
loader: StringReplacePlugin.replace({
|
||||
replacements: [
|
||||
{
|
||||
pattern: /%i18n:(.+?)%/g, replacement: (_, key) => {
|
||||
let text = locale;
|
||||
const error = key.split('.').some(k => {
|
||||
if (text.hasOwnProperty(k)) {
|
||||
text = text[k];
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
if (error) {
|
||||
console.warn(`key '${key}' not found in '${lang}'`);
|
||||
return key;
|
||||
} else {
|
||||
return text.replace(/'/g, '\\\'').replace(/"/g, '\\"');
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
{
|
||||
enforce: 'pre',
|
||||
test: /\.tag$/,
|
||||
exclude: /node_modules/,
|
||||
loader: StringReplacePlugin.replace({
|
||||
replacements: [
|
||||
{ pattern: /\$theme\-color\-foreground/g, replacement: () => constants.themeColorForeground },
|
||||
{ pattern: /\$theme\-color/g, replacement: () => constants.themeColor },
|
||||
]
|
||||
})
|
||||
},
|
||||
{
|
||||
test: /\.tag$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'riot-tag-loader',
|
||||
query: {
|
||||
hot: false,
|
||||
style: 'stylus',
|
||||
expr: false,
|
||||
compact: true,
|
||||
parserOptions: {
|
||||
style: {
|
||||
compress: true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.styl$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
{ loader: 'style-loader' },
|
||||
{ loader: 'css-loader' },
|
||||
{ loader: 'stylus-loader' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
VERSION: JSON.stringify(version),
|
||||
THEME_COLOR: JSON.stringify(constants.themeColor)
|
||||
}),
|
||||
new StringReplacePlugin()
|
||||
],
|
||||
output: {
|
||||
path: __dirname + '/built/web/assets',
|
||||
filename: `[name].${version}.${lang}.js`
|
||||
}
|
||||
};
|
||||
|
||||
if (isProduction) {
|
||||
//pack.plugins.push(new webpack.optimize.UglifyJsPlugin());
|
||||
}
|
||||
|
||||
return pack;
|
||||
});
|
23
webpack/langs.ts
Normal file
23
webpack/langs.ts
Normal file
|
@ -0,0 +1,23 @@
|
|||
/**
|
||||
* Languages Loader
|
||||
*/
|
||||
|
||||
import * as fs from 'fs';
|
||||
import * as yaml from 'js-yaml';
|
||||
|
||||
const loadLang = lang => yaml.safeLoad(
|
||||
fs.readFileSync(`./locales/${lang}.yml`, 'utf-8'));
|
||||
|
||||
const native = loadLang('ja');
|
||||
|
||||
const langs = Object.entries({
|
||||
'en': loadLang('en'),
|
||||
'ja': native
|
||||
});
|
||||
|
||||
langs.map(([, locale]) => {
|
||||
// Extend native language (Japanese)
|
||||
locale = Object.assign({}, native, locale);
|
||||
});
|
||||
|
||||
export default langs;
|
5
webpack/module/index.ts
Normal file
5
webpack/module/index.ts
Normal file
|
@ -0,0 +1,5 @@
|
|||
import rules from './rules';
|
||||
|
||||
export default (lang, locale) => ({
|
||||
rules: rules(lang, locale)
|
||||
});
|
34
webpack/module/rules/i18n.ts
Normal file
34
webpack/module/rules/i18n.ts
Normal file
|
@ -0,0 +1,34 @@
|
|||
/**
|
||||
* Replace i18n texts
|
||||
*/
|
||||
|
||||
const StringReplacePlugin = require('string-replace-webpack-plugin');
|
||||
|
||||
export default (lang, locale) => ({
|
||||
enforce: 'pre',
|
||||
test: /\.(tag|js)$/,
|
||||
exclude: /node_modules/,
|
||||
loader: StringReplacePlugin.replace({
|
||||
replacements: [
|
||||
{
|
||||
pattern: /%i18n:(.+?)%/g, replacement: (_, key) => {
|
||||
let text = locale;
|
||||
const error = key.split('.').some(k => {
|
||||
if (text.hasOwnProperty(k)) {
|
||||
text = text[k];
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
if (error) {
|
||||
console.warn(`key '${key}' not found in '${lang}'`);
|
||||
return key;
|
||||
} else {
|
||||
return text.replace(/'/g, '\\\'').replace(/"/g, '\\"');
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
11
webpack/module/rules/index.ts
Normal file
11
webpack/module/rules/index.ts
Normal file
|
@ -0,0 +1,11 @@
|
|||
import i18n from './i18n';
|
||||
import themeColor from './theme-color';
|
||||
import tag from './tag';
|
||||
import stylus from './stylus';
|
||||
|
||||
export default (lang, locale) => [
|
||||
i18n(lang, locale),
|
||||
themeColor(),
|
||||
tag(),
|
||||
stylus()
|
||||
];
|
13
webpack/module/rules/stylus.ts
Normal file
13
webpack/module/rules/stylus.ts
Normal file
|
@ -0,0 +1,13 @@
|
|||
/**
|
||||
* Stylus support
|
||||
*/
|
||||
|
||||
export default () => ({
|
||||
test: /\.styl$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
{ loader: 'style-loader' },
|
||||
{ loader: 'css-loader' },
|
||||
{ loader: 'stylus-loader' }
|
||||
]
|
||||
});
|
20
webpack/module/rules/tag.ts
Normal file
20
webpack/module/rules/tag.ts
Normal file
|
@ -0,0 +1,20 @@
|
|||
/**
|
||||
* Riot tags
|
||||
*/
|
||||
|
||||
export default () => ({
|
||||
test: /\.tag$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'riot-tag-loader',
|
||||
query: {
|
||||
hot: false,
|
||||
style: 'stylus',
|
||||
expr: false,
|
||||
compact: true,
|
||||
parserOptions: {
|
||||
style: {
|
||||
compress: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
25
webpack/module/rules/theme-color.ts
Normal file
25
webpack/module/rules/theme-color.ts
Normal file
|
@ -0,0 +1,25 @@
|
|||
/**
|
||||
* Theme color provider
|
||||
*/
|
||||
|
||||
const StringReplacePlugin = require('string-replace-webpack-plugin');
|
||||
|
||||
const constants = require('../../../src/const.json');
|
||||
|
||||
export default () => ({
|
||||
enforce: 'pre',
|
||||
test: /\.tag$/,
|
||||
exclude: /node_modules/,
|
||||
loader: StringReplacePlugin.replace({
|
||||
replacements: [
|
||||
{
|
||||
pattern: /\$theme\-color\-foreground/g,
|
||||
replacement: () => constants.themeColorForeground
|
||||
},
|
||||
{
|
||||
pattern: /\$theme\-color/g,
|
||||
replacement: () => constants.themeColor
|
||||
},
|
||||
]
|
||||
})
|
||||
});
|
13
webpack/plugins/const.ts
Normal file
13
webpack/plugins/const.ts
Normal file
|
@ -0,0 +1,13 @@
|
|||
/**
|
||||
* Constant Replacer
|
||||
*/
|
||||
|
||||
import * as webpack from 'webpack';
|
||||
|
||||
import version from '../../src/version';
|
||||
const constants = require('../../src/const.json');
|
||||
|
||||
export default () => new webpack.DefinePlugin({
|
||||
VERSION: JSON.stringify(version),
|
||||
THEME_COLOR: JSON.stringify(constants.themeColor)
|
||||
});
|
19
webpack/plugins/index.ts
Normal file
19
webpack/plugins/index.ts
Normal file
|
@ -0,0 +1,19 @@
|
|||
const StringReplacePlugin = require('string-replace-webpack-plugin');
|
||||
|
||||
import constant from './const';
|
||||
|
||||
const env = process.env.NODE_ENV;
|
||||
const isProduction = env === 'production';
|
||||
|
||||
export default () => {
|
||||
const plugins = [
|
||||
constant(),
|
||||
new StringReplacePlugin()
|
||||
];
|
||||
|
||||
if (isProduction) {
|
||||
//plugins.push(new webpack.optimize.UglifyJsPlugin());
|
||||
}
|
||||
|
||||
return plugins;
|
||||
};
|
35
webpack/webpack.config.ts
Normal file
35
webpack/webpack.config.ts
Normal file
|
@ -0,0 +1,35 @@
|
|||
/**
|
||||
* webpack configuration
|
||||
*/
|
||||
|
||||
import module_ from './module';
|
||||
import plugins from './plugins';
|
||||
|
||||
import langs from './langs';
|
||||
import version from '../src/version';
|
||||
|
||||
module.exports = langs.map(([lang, locale]) => {
|
||||
// Chunk name
|
||||
const name = lang;
|
||||
|
||||
// Entries
|
||||
const entry = {
|
||||
'desktop': './src/web/app/desktop/script.js',
|
||||
'mobile': './src/web/app/mobile/script.js',
|
||||
'dev': './src/web/app/dev/script.js',
|
||||
'auth': './src/web/app/auth/script.js'
|
||||
};
|
||||
|
||||
const output = {
|
||||
path: __dirname + '/../built/web/assets',
|
||||
filename: `[name].${version}.${lang}.js`
|
||||
};
|
||||
|
||||
return {
|
||||
name,
|
||||
entry,
|
||||
module: module_(lang, locale),
|
||||
plugins: plugins(),
|
||||
output
|
||||
};
|
||||
});
|
Loading…
Reference in a new issue