Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add bundlesize #5810

Merged
merged 1 commit into from
Aug 6, 2018
+353 −102
Merged

Add bundlesize #5810

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .travis.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,16 @@ cache:

# Allow to display job names on Travis-CI, see:
# https://github.com/travis-ci/travis-ci/issues/5898#issuecomment-362490313
script: yarn $COMMAND
script: FORCE_COLOR=0 yarn $COMMAND
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea

jobs:
include:
# Test the build process.
- stage:
<<: *node-prod
env: ADDONS_FRONTEND_BUILD_ALL=1 COMMAND=build
env: COMMAND=build-ci
- stage:
<<: *node-next
env: ADDONS_FRONTEND_BUILD_ALL=1 COMMAND=build
env: COMMAND=build-all
# Run the unit/integration tests.
- stage:
<<: *node-prod
Expand Down
58 changes: 32 additions & 26 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,32 +33,37 @@ The easiest way to manage multiple node versions in development is to use [nvm](

Here are some commands you can run:

| Command | Description |
| --------------------------- | ---------------------------------------------------------------------------------------------------------- |
| yarn amo | Start the dev server/proxy (for amo) using data from Docker |
| yarn amo:dev | Start the dev server/proxy (for amo) using data from the dev server (https://addons-dev.allizom.org/) |
| yarn amo:no-proxy | Start the dev server without a proxy (for amo) using data from Docker |
| yarn amo:stage | Start the dev server/proxy (for amo) using data from the staging server (https://addons.allizom.org/) |
| yarn disco | Start the dev server (for Discovery Pane) using data from the dev server (https://addons-dev.allizom.org/) |
| yarn flow | Run Flow. By default this checks for errors and exits |
| yarn flow:check | Explicitly check for Flow errors and exit |
| yarn flow:dev | Continuously check for Flow errors |
| yarn eslint | Lint the JS |
| yarn snyk | Run [snyk](#snyk) (without a command) |
| yarn snyk-ci | Run [snyk](#snyk) `test` and `monitor` |
| yarn snyk-wizard | Run [snyk](#snyk) `wizard` to fix an issue reported by snyk |
| yarn start-func-test-server | Start a Docker container for functional tests |
| yarn stylelint | Lint the SCSS |
| yarn lint | Run all the JS + SCSS linters |
| yarn prettier | Run [Prettier][] to automatically format the entire codebase |
| yarn prettier-dev | Run [Pretty-Quick][] to automatically compare and format modified source files against the master branch |
| yarn prettier-ci | Run [Prettier][] and fail if some code has been changed without being formatted |
| yarn version-check | Check you have the required dependencies |
| yarn test | Run all tests (Enters [jest][] in `--watch` mode) |
| yarn test-coverage | Run all tests and generate code coverage report (Enters [jest][] in `--watch` mode) |
| yarn test-coverage-once | Run all tests, generate code coverage report, then exit |
| yarn test-once | Run all tests, run all JS + SCSS linters, then exit |
| yarn test-ci | Run all continuous integration checks. This is only meant to run on TravisCI. |
| Command | Description |
| ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| yarn amo | Start the dev server/proxy (for amo) using data from Docker |
| yarn amo:dev | Start the dev server/proxy (for amo) using data from the dev server (https://addons-dev.allizom.org/) |
| yarn amo:no-proxy | Start the dev server without a proxy (for amo) using data from Docker |
| yarn amo:stage | Start the dev server/proxy (for amo) using data from the staging server (https://addons.allizom.org/) |
| yarn build | Build an app specified with the `NODE_APP_INSTANCE` environment variable. |
| yarn build-all | Build all the applications. |
| yarn build-ci | Run the `build-all` and `bundlesize` npm scripts. |
| yarn bundlesize | Run [bundlesize][] to check the generated AMO bundle sizes. |
| [Building AMO is required first](#building-and-running-services). |
| yarn disco | Start the dev server (for Discovery Pane) using data from the dev server (https://addons-dev.allizom.org/) |
| yarn flow | Run Flow. By default this checks for errors and exits |
| yarn flow:check | Explicitly check for Flow errors and exit |
| yarn flow:dev | Continuously check for Flow errors |
| yarn eslint | Lint the JS |
| yarn snyk | Run [snyk](#snyk) (without a command) |
| yarn snyk-ci | Run [snyk](#snyk) `test` and `monitor` |
| yarn snyk-wizard | Run [snyk](#snyk) `wizard` to fix an issue reported by snyk |
| yarn start-func-test-server | Start a Docker container for functional tests |
| yarn stylelint | Lint the SCSS |
| yarn lint | Run all the JS + SCSS linters |
| yarn prettier | Run [Prettier][] to automatically format the entire codebase |
| yarn prettier-dev | Run [Pretty-Quick][] to automatically compare and format modified source files against the master branch |
| yarn prettier-ci | Run [Prettier][] and fail if some code has been changed without being formatted |
| yarn version-check | Check you have the required dependencies |
| yarn test | Run all tests (Enters [jest][] in `--watch` mode) |
| yarn test-coverage | Run all tests and generate code coverage report (Enters [jest][] in `--watch` mode) |
| yarn test-coverage-once | Run all tests, generate code coverage report, then exit |
| yarn test-once | Run all tests, run all JS + SCSS linters, then exit |
| yarn test-ci | Run all continuous integration checks. This is only meant to run on TravisCI. |

### Running tests

Expand Down Expand Up @@ -390,6 +395,7 @@ At a later date if we need to move things out into their own project we still ca
- Universal rendering via node
- Unit tests with high coverage (aiming for 100%)

[bundlesize]: https://github.com/siddharthkp/bundlesize
[jest]: https://facebook.github.io/jest/docs/en/getting-started.html
[prettier]: https://prettier.io/
[pretty-quick]: https://www.npmjs.com/package/pretty-quick
Expand Down
9 changes: 5 additions & 4 deletions bin/build-checks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ const config = require('config');

const appName = config.get('appName');

// Bail if appName isn't set unless explicitly enabled.
if (!appName && process.env.ADDONS_FRONTEND_BUILD_ALL !== '1') {
console.log(
chalk.red('Please specify the appName with NODE_APP_INSTANCE'));
// Bail if appName isn't set.
if (!appName) {
console.log(chalk.red('Please specify the appName with NODE_APP_INSTANCE'));
process.exit(1);
}

console.log(chalk.green(`\n---> BUILDING: ${appName}\n`));
111 changes: 53 additions & 58 deletions bin/build-locales
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,73 +16,68 @@ const chalk = require('chalk');
const toSource = require('tosource');
const oneLine = require('common-tags').oneLine;

const app = config.get('appName');
const buildAll = process.env.ADDONS_FRONTEND_BUILD_ALL === '1';
const appName = config.get('appName');

if (!app && !buildAll) {
console.log(
chalk.red('Please specify the appName with NODE_APP_INSTANCE'));
if (!appName) {
console.log(chalk.red('Please specify the appName with NODE_APP_INSTANCE'));
process.exit(1);
}

const appsBuildList = buildAll ? config.get('validAppNames') : [app];
for (const appName of appsBuildList) {
const localeDir = path.join(__dirname, '../locale');
const poFiles = glob.sync(`${localeDir}/**/${appName}.po`);
const dest = path.join(__dirname, '../src/locale/');
const localeDir = path.join(__dirname, '../locale');
const poFiles = glob.sync(`${localeDir}/**/${appName}.po`);
const dest = path.join(__dirname, '../src/locale/');

poFiles.forEach((pofile) => {
const dir = path.dirname(pofile);
const subdir = path.dirname(dir);
const locale = path.basename(subdir);
const stem = path.basename(pofile, '.po');
const localeOutputFilePath = path.join(dest, locale, `${stem}.js`);
shelljs.mkdir('-p', path.join(dest, locale));
poFiles.forEach((pofile) => {
const dir = path.dirname(pofile);
const subdir = path.dirname(dir);
const locale = path.basename(subdir);
const stem = path.basename(pofile, '.po');
const localeOutputFilePath = path.join(dest, locale, `${stem}.js`);
shelljs.mkdir('-p', path.join(dest, locale));

const json = po2json.parseFileSync(pofile, {
stringify: true,
pretty: true,
format: 'jed1.x',
fuzzy: config.get('po2jsonFuzzyOutput'),
});
const localeObject = JSON.parse(json);
const json = po2json.parseFileSync(pofile, {
stringify: true,
pretty: true,
format: 'jed1.x',
fuzzy: config.get('po2jsonFuzzyOutput'),
});
const localeObject = JSON.parse(json);

// Add the moment locale JS into our locale file, if one is available and
// we're building for AMO (which is the only app that uses moment right
// now).
if (appName === 'amo') {
var defineLocale = null;
try {
const momentLocale = locale.replace('_', '-').toLowerCase();
const localeModulePath = `moment/locale/${momentLocale}`;
// Check for the locale first; if it doesn't exist we don't have
// a moment locale that matches.
fs.accessSync(`./node_modules/${localeModulePath}.js`);
// Add the moment locale JS into our locale file, if one is available and
// we're building for AMO (which is the only app that uses moment right
// now).
if (appName === 'amo') {
var defineLocale = null;
try {
const momentLocale = locale.replace('_', '-').toLowerCase();
const localeModulePath = `moment/locale/${momentLocale}`;
// Check for the locale first; if it doesn't exist we don't have
// a moment locale that matches.
fs.accessSync(`./node_modules/${localeModulePath}.js`);

// We're using `new Function()` here to create a function out of the
// raw code; this function won't be executed but will be written out by
// `toSource()` so that it can be used later (at runtime, by moment).
defineLocale = new Function(`
// By requiring this module, the new locale is defined and
// registered internally for moment.js
require('${localeModulePath}');`);
} catch (e) {
// We ignore missing locale errors for en_US as its moment's default
// locale so we don't need to provide a translation.
if (locale !== 'en_US') {
console.info(oneLine`No moment i18n available for ${locale};
consider adding one or creating a mapping.`);
}
// We're using `new Function()` here to create a function out of the
// raw code; this function won't be executed but will be written out by
// `toSource()` so that it can be used later (at runtime, by moment).
defineLocale = new Function(`
// By requiring this module, the new locale is defined and
// registered internally for moment.js
require('${localeModulePath}');`);
} catch (e) {
// We ignore missing locale errors for en_US as its moment's default
// locale so we don't need to provide a translation.
if (locale !== 'en_US') {
console.info(oneLine`No moment i18n available for ${locale};
consider adding one or creating a mapping.`);
}

localeObject._momentDefineLocale = defineLocale;
}

// This is used to force cache-busting of the JS via changing all locale JS.
// DO NOT REMOVE! See https://github.com/mozilla/addons-frontend/issues/4927
localeObject._cacheBust = '2018.08.02';
localeObject._momentDefineLocale = defineLocale;
}

fs.writeFileSync(
localeOutputFilePath, `module.exports = ${toSource(localeObject)}`);
});
}
// This is used to force cache-busting of the JS via changing all locale JS.
// DO NOT REMOVE! See https://github.com/mozilla/addons-frontend/issues/4927
localeObject._cacheBust = '2018.08.02';

fs.writeFileSync(
localeOutputFilePath, `module.exports = ${toSource(localeObject)}`);
});
19 changes: 17 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,12 @@
"node": ">=6 <=8"
},
"scripts": {
"build": "bin/build-checks.js && better-npm-run build",
"build": "npm run clean && better-npm-run build",
"build-all": "npm run clean && NODE_APP_INSTANCE=amo better-npm-run build && NODE_APP_INSTANCE=disco better-npm-run build",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But what if we add a new app??! I'm only kidding. I hope we never do that.

"build-check": "bin/build-checks.js",
"build-ci": "npm run build-all && npm run bundlesize",
"build-locales": "bin/build-locales",
"bundlesize": "bundlesize",
"extract-locales": "better-npm-run extract-locales",
"clean": "rimraf './dist/*!(.gitkeep)' './webpack-assets.json' './src/locale/**(!.gitkeep)'",
"amo": "better-npm-run amo",
Expand Down Expand Up @@ -41,7 +45,7 @@
},
"betterScripts": {
"build": {
"command": "npm run clean && npm run version-check && npm run build-locales && webpack --bail --verbose --display-error-details --progress --colors --config webpack.prod.config.babel.js",
"command": "npm run build-check && npm run version-check && npm run build-locales && webpack --bail --verbose --display-error-details --progress --colors --config webpack.prod.config.babel.js",
"env": {
"NODE_ICU_DATA": "./node_modules/full-icu",
"NODE_PATH": "./:./src"
Expand Down Expand Up @@ -237,6 +241,7 @@
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.24.1",
"bundle-loader": "^0.5.5",
"bundlesize": "^0.17.0",
"chalk": "^2.0.1",
"cheerio": "^1.0.0-rc.2",
"chokidar-cli": "^1.2.0",
Expand Down Expand Up @@ -297,5 +302,15 @@
"webpack-hot-middleware": "^2.18.0",
"webpack-subresource-integrity": "^1.0.0-rc.1"
},
"bundlesize": [
{
"path": "./dist/@(amo|disco)-!(i18n-)*.js",
"maxSize": "400 kB"
},
{
"path": "./dist/@(amo|disco)-i18n-*.js",
"maxSize": "25 kB"
}
],
"snyk": true
}
Loading