change webpack config, use cache and build one language after another
with scripts/build.js update README
This commit is contained in:
parent
02e2d431d4
commit
d444b3498b
|
@ -252,13 +252,10 @@ Run `npm run lint:src` to check for code errors and warnings or `npm run lint --
|
||||||
Please do not produce too many additional warnings.
|
Please do not produce too many additional warnings.
|
||||||
|
|
||||||
[ttag](https://github.com/ttag-org/ttag/) is used for handling translations. For server-side rendering the `Accept-Language` header gets checked and the first locale used and on-the-fly translated (`src/core/ttag.js` provides the functions for it). On the client-side a seperate bundle for every language gets provided.
|
[ttag](https://github.com/ttag-org/ttag/) is used for handling translations. For server-side rendering the `Accept-Language` header gets checked and the first locale used and on-the-fly translated (`src/core/ttag.js` provides the functions for it). On the client-side a seperate bundle for every language gets provided.
|
||||||
To update the language definitions in `i18n/template.pot` and `i18n/template-ssr.pot` run
|
The language definitions in `i18n/template.pot` and `i18n/template-ssr.pot` get updated when doing a dev build with
|
||||||
```
|
```
|
||||||
npm run extract
|
npm run build:dev
|
||||||
```
|
```
|
||||||
|
which also only builds the default local in a development environment for debugging.
|
||||||
|
|
||||||
You can use `npm run babel-node ./your/script.js` to execute a script with local babel.
|
You can use `npm run babel-node ./your/script.js` to execute a script with local babel.
|
||||||
|
|
||||||
`npm run upgrade` can be use for interactively upgrading npm packages.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -50,7 +50,7 @@ do
|
||||||
COMMITS=`echo "$COMMITS" | sed ':a;N;$!ba;s/\n/\\\n/g'`
|
COMMITS=`echo "$COMMITS" | sed ':a;N;$!ba;s/\n/\\\n/g'`
|
||||||
echo "---BUILDING pixelplanet---"
|
echo "---BUILDING pixelplanet---"
|
||||||
cd "$BUILDDIR"
|
cd "$BUILDDIR"
|
||||||
nice -n 19 npm run build-en
|
nice -n 19 npm run build:dev
|
||||||
echo "---RESTARTING CANVAS---"
|
echo "---RESTARTING CANVAS---"
|
||||||
cp -r dist/*.js "${DEVFOLDER}/"
|
cp -r dist/*.js "${DEVFOLDER}/"
|
||||||
cp -r dist/public "${DEVFOLDER}/"
|
cp -r dist/public "${DEVFOLDER}/"
|
||||||
|
|
|
@ -9,11 +9,10 @@
|
||||||
"description": "Unlimited planet canvas for placing pixels",
|
"description": "Unlimited planet canvas for placing pixels",
|
||||||
"main": "server.js",
|
"main": "server.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "npm run webpack && npm run minify-css",
|
"build": "babel-node scripts/build.js && npm run minify-css",
|
||||||
"build-en": "npm run extract && npm run minify-css",
|
"build:dev": "npm run extract && npm run minify-css",
|
||||||
"webpack": "webpack --config ./webpack.config.web.babel.js && webpack --config ./webpack.config.client.babel.js",
|
|
||||||
"minify-css": "babel-node scripts/minifyCss.js",
|
"minify-css": "babel-node scripts/minifyCss.js",
|
||||||
"extract": "webpack --env extract --config ./webpack.config.web.babel.js && webpack --env extract --config ./webpack.config.client.babel.js",
|
"extract": "webpack --env extract --config ./webpack.config.server.babel.js && webpack --env extract --env development --config ./webpack.config.client.babel.js",
|
||||||
"babel-node": "cd $INIT_CWD && babel-node",
|
"babel-node": "cd $INIT_CWD && babel-node",
|
||||||
"lint": "cd $INIT_CWD && eslint --ext .jsx --ext .js",
|
"lint": "cd $INIT_CWD && eslint --ext .jsx --ext .js",
|
||||||
"lint:src": "eslint --ext .jsx --ext .js src",
|
"lint:src": "eslint --ext .jsx --ext .js src",
|
||||||
|
|
50
scripts/build.js
Normal file
50
scripts/build.js
Normal file
|
@ -0,0 +1,50 @@
|
||||||
|
/*
|
||||||
|
* We got so many locals that building them all in one go can lead to out-of-memory error
|
||||||
|
* Lets split that here
|
||||||
|
*/
|
||||||
|
|
||||||
|
import webpack from 'webpack';
|
||||||
|
import serverConfig from '../webpack.config.server.babel.js';
|
||||||
|
import clientConfig, {getAllAvailableLocals} from '../webpack.config.client.babel.js';
|
||||||
|
|
||||||
|
function compile(webpackConfig) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
webpack(webpackConfig).run((err, stats) => {
|
||||||
|
if (err) {
|
||||||
|
return reject(err);
|
||||||
|
}
|
||||||
|
const statsConfig = (webpackConfig.length) ? webpackConfig[0].stats : webpackConfig.stats;
|
||||||
|
console.log(stats.toString(statsConfig))
|
||||||
|
return resolve();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function buildProduction() {
|
||||||
|
// server files
|
||||||
|
console.log('-----------------------------');
|
||||||
|
console.log(`Build server...`);
|
||||||
|
console.log('-----------------------------');
|
||||||
|
await compile(serverConfig({
|
||||||
|
development: false,
|
||||||
|
extract: false,
|
||||||
|
}));
|
||||||
|
// client files
|
||||||
|
const langs = getAllAvailableLocals();
|
||||||
|
console.log('Available locales:', langs);
|
||||||
|
const st = Date.now();
|
||||||
|
for(let i = 0; i < langs.length; i += 1) {
|
||||||
|
const lang = langs[i];
|
||||||
|
console.log(`Build client for locale ${lang}...`);
|
||||||
|
console.log('-----------------------------');
|
||||||
|
await compile(clientConfig({
|
||||||
|
development: false,
|
||||||
|
analyze: false,
|
||||||
|
extract: false,
|
||||||
|
locale: lang,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
console.log(`Finished building in ${(Date.now() - st) / 1000}s`);
|
||||||
|
}
|
||||||
|
|
||||||
|
buildProduction();
|
|
@ -45,6 +45,14 @@ export function buildWebpackClientConfig(
|
||||||
['ttag', ttag],
|
['ttag', ttag],
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// cache invalidates if .po file changed
|
||||||
|
const buildDependencies = {
|
||||||
|
config: [__filename],
|
||||||
|
}
|
||||||
|
if (locale !== 'default') {
|
||||||
|
buildDependencies.i18n = [ttag.resolve.translations];
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
name: 'client',
|
name: 'client',
|
||||||
target: 'web',
|
target: 'web',
|
||||||
|
@ -182,52 +190,56 @@ export function buildWebpackClientConfig(
|
||||||
chunkModules: false,
|
chunkModules: false,
|
||||||
},
|
},
|
||||||
|
|
||||||
/*
|
|
||||||
* maybe some day in the future it might be
|
|
||||||
* usesable - but then remember to
|
|
||||||
* wreck the cache when .po files changed
|
|
||||||
cache: {
|
cache: {
|
||||||
type: 'filesystem',
|
type: 'filesystem',
|
||||||
cacheDirectory: path.resolve(
|
name: (development) ? `${locale}-dev` : locale,
|
||||||
__dirname,
|
buildDependencies,
|
||||||
'node_modules',
|
|
||||||
'.cache',
|
|
||||||
'webpack',
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
*/
|
|
||||||
cache: false,
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getAllAvailableLocals() {
|
||||||
|
const langDir = path.resolve(__dirname, 'i18n');
|
||||||
|
const langs = fs.readdirSync(langDir)
|
||||||
|
.filter((e) => (e.endsWith('.po') && !e.startsWith('ssr')))
|
||||||
|
.map((l) => l.slice(0, -3));
|
||||||
|
langs.push('default');
|
||||||
|
return langs;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* return array of webpack configuartions for all languages
|
* return array of webpack configuartions for all languages
|
||||||
*/
|
*/
|
||||||
function buildWebpackClientConfigAllLangs(development, analyze) {
|
function buildWebpackClientConfigAllLangs() {
|
||||||
let webpackConfigClient = [
|
const langs = getAllAvailableLocals();
|
||||||
buildWebpackClientConfig(development, analyze, 'default', false),
|
const webpackConfigClient = [];
|
||||||
];
|
for (let l = 0; l < langs.length; l += 1) {
|
||||||
/*
|
const lang = langs[l];
|
||||||
* get available translations
|
const cfg = buildWebpackClientConfig(false, false, lang, false);
|
||||||
*/
|
webpackConfigClient.push(cfg);
|
||||||
const langDir = path.resolve(__dirname, 'i18n');
|
}
|
||||||
const langs = fs.readdirSync(langDir)
|
|
||||||
.filter((e) => (e.endsWith('.po') && !e.startsWith('ssr')))
|
|
||||||
.map((l) => l.slice(0, -3));
|
|
||||||
webpackConfigClient = webpackConfigClient.concat(
|
|
||||||
langs.map((l) => buildWebpackClientConfig(development, analyze, l)),
|
|
||||||
);
|
|
||||||
|
|
||||||
return webpackConfigClient;
|
return webpackConfigClient;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Per default get configuration of all packages
|
||||||
|
* If any argument is given, it will only get one
|
||||||
|
* ('default' aka english if locale is unset)
|
||||||
|
*
|
||||||
|
* @param development If development mode
|
||||||
|
* @param extract if translatable strings get in i18n templates should
|
||||||
|
* get updated
|
||||||
|
* @param locale language get single configuration of specific locale
|
||||||
|
* @param analyze launch BundleAnalyzerPlugin after build
|
||||||
|
* @return webpack configuration
|
||||||
|
*/
|
||||||
export default ({
|
export default ({
|
||||||
development, analyze, extract, locale,
|
development, analyze, extract, locale,
|
||||||
}) => {
|
}) => {
|
||||||
if (extract || locale) {
|
if (extract || analyze || locale || development) {
|
||||||
return buildWebpackClientConfig(
|
return buildWebpackClientConfig(
|
||||||
development, analyze, locale || 'default', extract,
|
development, analyze, locale || 'default', extract,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return buildWebpackClientConfigAllLangs(development, analyze);
|
return buildWebpackClientConfigAllLangs(development);
|
||||||
};
|
};
|
||||||
|
|
|
@ -28,7 +28,7 @@ const babelPlugins = [
|
||||||
['ttag', ttag],
|
['ttag', ttag],
|
||||||
];
|
];
|
||||||
|
|
||||||
console.log('IGNORE GPJWP (generate-package-json-webpack-plugin) WARNINGS / ERRORS, ITS CURRENT VERSION IS A BIG BUGGY, BUT STILL WORKS');
|
console.log('IGNORE GPJWP (generate-package-json-webpack-plugin) WARNINGS / ERRORS, ITS CURRENT VERSION IS A BIT BUGGY, BUT STILL WORKS');
|
||||||
|
|
||||||
export default ({
|
export default ({
|
||||||
development, extract,
|
development, extract,
|
Loading…
Reference in New Issue
Block a user