Permalink
Browse files

Refactor build and package layout

This is a major refactor of React Intl's build and npm package
layout.

Locale data is now package-relative and can more easily be loaded:
```js
import enLocaleData from 'react-intl/locale-data/en';
```

There is now only one copy of these locale data files in the package
and they are UMD modules which export the locale data for a language.

Rollup is now being used to build a _single-file_ React Intl module
for three different targets:

- `ReactIntl` global: Browser build with bundled dependencies
- CommonJS (`main`): For Node/Browserify/Webpack with `require()`-d
dependencies
- ES6 (`jsnext:main`): For consumption via `import` with `import`-d
dependencies

All of the builds are compiled with Babel and bundled into a single
module file. Rollup is used to fold all of the internal `src/`
modules into one. The difference between `lib/index.js` and
`lib/index.es.js` is the latter has everything compiled expect the
`import`/`export` statements for React Intl as a whole package.

The `.babelrc` files have been moved to closer to the source code
which they apply. This allows for test or example code to leverage
experimental ECMAScript syntax without leaking it into the main src.

These changes should result is a smaller and faster package as all of
React Intl's code is folded into a single module scope, and the Babel
helpers are only included once (instead of per module file). As well
as fixing support for IE8.

Fixes #203
Fixes #204
Fixes #275
Fixes #277
  • Loading branch information...
1 parent 7d9ddaa commit 36bd26ef98eb2a5cce9de81e1fa10809068c15e8 @ericf ericf committed Jan 12, 2016
View
@@ -3,5 +3,6 @@ examples/**/node_modules/**/*.js
examples/**/build/**/*.js
examples/hello-world/bundle.js
lib/**/*.js
+locale-data/**/*.js
src/en.js
src/locale-data/*.js
View
@@ -1,6 +1,6 @@
coverage/
dist/
lib/
+locale-data/
node_modules/
-src/locale-data/
src/en.js
View
@@ -1,4 +1,4 @@
instrumentation:
excludes:
+ - locale-data/*
- src/en.js
- - src/locale-data/*
View
@@ -2,4 +2,5 @@ coverage/
examples/
scripts/
test/
+rollup.config.*
.*
@@ -0,0 +1,6 @@
+{
+ "presets": [
+ "es2015",
+ "react"
+ ]
+}
@@ -12,7 +12,7 @@
"author": "James Kyle <me@thejameskyle.com>",
"license": "BSD-3-Clause",
"browser": {
- "react-intl": "../../lib/react-intl.js"
+ "react-intl": "../../lib/index.js"
},
"browserify-shim": {
"react": "global:React",
@@ -0,0 +1,6 @@
+{
+ "presets": [
+ "es2015",
+ "react"
+ ]
+}
@@ -12,7 +12,7 @@
"author": "Eric Ferraiuolo <edf@ericf.me>",
"license": "BSD-3-Clause",
"browser": {
- "react-intl": "../../lib/react-intl.js"
+ "react-intl": "../../lib/index.js"
},
"browserify-shim": {
"react": "global:React",
@@ -4,7 +4,6 @@
"react"
],
"plugins": [
- "transform-object-rest-spread",
["react-intl", {
"messagesDir": "./build/messages/"
}]
@@ -14,8 +14,8 @@
"author": "Eric Ferraiuolo <edf@ericf.me>",
"license": "BSD-3-Clause",
"browser": {
- "react-intl": "../../lib/react-intl.js",
- "react-intl/locale-data/en": "../../lib/locale-data/en.js"
+ "react-intl": "../../lib/index.js",
+ "react-intl/locale-data/en": "../../locale-data/en.js"
},
"browserify-shim": {
"react": "global:React",
@@ -4,7 +4,6 @@
"react"
],
"plugins": [
- "transform-object-rest-spread",
["react-intl", {
"messagesDir": "./build/messages/"
}]
@@ -14,8 +14,8 @@
"author": "Eric Ferraiuolo <edf@ericf.me>",
"license": "BSD-3-Clause",
"browser": {
- "react-intl": "../../lib/react-intl.js",
- "react-intl/locale-data/en": "../../lib/locale-data/en.js"
+ "react-intl": "../../lib/index.js",
+ "react-intl/locale-data/en": "../../locale-data/en.js"
},
"browserify-shim": {
"react": "global:React",
View
@@ -21,9 +21,12 @@
"type": "git",
"url": "git@github.com:yahoo/react-intl.git"
},
- "main": "./lib/react-intl-with-locales.js",
- "jsnext:main": "./src/react-intl.js",
- "browser": "./lib/react-intl.js",
+ "main": "./lib/index.js",
+ "jsnext:main": "./lib/index.es.js",
+ "browser": {
+ "./locale-data/index": false,
+ "./locale-data/index.js": false
+ },
"browserify-shim": {
"react": "global:React"
},
@@ -51,10 +54,9 @@
"babelify": "^7.2.0",
"browserify": "^12.0.1",
"browserify-shim": "^3.8.11",
- "es5-shim": "^4.1.10",
+ "es6-promise": "^3.0.2",
"eslint": "^1.2.1",
"eslint-plugin-react": "^3.2.3",
- "exorcist": "^0.4.0",
"expect": "^1.9.0",
"expect-jsx": "^2.2.1",
"express": "^4.13.3",
@@ -69,20 +71,21 @@
"react-addons-test-utils": "^0.14.3",
"react-dom": "^0.14.2",
"rimraf": "^2.4.2",
- "rollup": "^0.23.1",
+ "rollup": "^0.24.1",
"rollup-plugin-babel": "^2.3.3",
"rollup-plugin-commonjs": "^2.1.0",
+ "rollup-plugin-memory": "^1.0.0",
"rollup-plugin-npm": "^1.1.0",
"rollup-plugin-replace": "^1.1.0",
+ "rollup-plugin-uglify": "^0.1.0",
"serialize-javascript": "^1.1.1",
- "superagent": "^1.5.0",
- "uglify-js": "^2.4.24"
+ "superagent": "^1.5.0"
},
"scripts": {
"lint": "eslint src/ test/ scripts/ examples/",
- "clean": "rimraf src/en.js src/locale-data/ coverage/ dist/ lib/",
- "build:data": "babel-node scripts/build-locale-data",
- "build:lib": "babel src/ --ignore src/locale-data/ --out-dir lib/",
+ "clean": "rimraf src/en.js coverage/ dist/ lib/ locale-data/",
+ "build:data": "babel-node scripts/build-data",
+ "build:lib": "babel-node scripts/build-lib",
"build:dist:dev": "NODE_ENV=development babel-node scripts/build-dist",
"build:dist:prod": "NODE_ENV=production babel-node scripts/build-dist",
"build:dist": "npm run build:dist:dev && npm run build:dist:prod",
View
@@ -0,0 +1,5 @@
+{
+ "presets": [
+ "es2015"
+ ]
+}
@@ -3,8 +3,9 @@ import * as p from 'path';
import {sync as mkdirpSync} from 'mkdirp';
import extractCLDRData from 'formatjs-extract-cldr-data';
import serialize from 'serialize-javascript';
-import rollup from 'rollup';
-import uglify from 'uglify-js';
+import {rollup} from 'rollup';
+import memory from 'rollup-plugin-memory';
+import uglify from 'rollup-plugin-uglify';
const DEFAULT_LOCALE = 'en';
@@ -24,41 +25,33 @@ const cldrDataByLang = [...cldrDataByLocale].reduce((map, [locale, data]) => {
}, new Map());
function createDataModule(localeData) {
- const serializedLocaleData = serialize(localeData);
-
- return {
- es6: (
-`// GENERATED FILE
-export default ${serializedLocaleData};
-`
- ),
-
- commonjs: (
+ return (
`// GENERATED FILE
-module.exports = ${serializedLocaleData};
+export default ${serialize(localeData)};
`
- ),
- };
+ );
}
-function generateUMDFile(srcFilename) {
- const lang = p.basename(srcFilename, '.js');
-
- return rollup.rollup({
- entry: srcFilename,
+function writeUMDFile(filename, module) {
+ const lang = p.basename(filename, '.js');
+
+ return rollup({
+ entry: filename,
+ plugins: [
+ memory({
+ contents: module,
+ }),
+ uglify(),
+ ],
})
.then((bundle) => {
- return bundle.generate({
+ return bundle.write({
+ dest : filename,
format : 'umd',
moduleName: `ReactIntlLocaleData.${lang}`,
});
})
- .then(({code}) => {
- return uglify.minify(code, {
- fromString: true,
- warnings : false,
- }).code;
- });
+ .then(() => filename);
}
function writeFile(filename, contents) {
@@ -75,31 +68,17 @@ function writeFile(filename, contents) {
// -----------------------------------------------------------------------------
-process.on('unhandledRejection', (reason) => {throw reason;});
-
-mkdirpSync('src/locale-data/');
-mkdirpSync('lib/locale-data/');
-mkdirpSync('dist/locale-data/');
+mkdirpSync('locale-data/');
const defaultData = createDataModule(cldrDataByLocale.get(DEFAULT_LOCALE));
-writeFile(`src/${DEFAULT_LOCALE}.js`, defaultData.es6);
+writeFile(`src/${DEFAULT_LOCALE}.js`, defaultData);
const allData = createDataModule([...cldrDataByLocale.values()]);
-writeFile('lib/locale-data/index.js', allData.commonjs);
-writeFile('src/locale-data/index.js', allData.es6)
- .then(generateUMDFile)
- .then((umdFile) => {
- writeFile('dist/locale-data/index.js', umdFile);
- });
+writeUMDFile('locale-data/index.js', allData);
cldrDataByLang.forEach((cldrData, lang) => {
- const data = createDataModule(cldrData);
- writeFile(`lib/locale-data/${lang}.js`, data.commonjs);
- writeFile(`src/locale-data/${lang}.js`, data.es6)
- .then(generateUMDFile)
- .then((umdFile) => {
- writeFile(`dist/locale-data/${lang}.js`, umdFile);
- });
+ writeUMDFile(`locale-data/${lang}.js`, createDataModule(cldrData));
});
+process.on('unhandledRejection', (reason) => {throw reason;});
console.log('Writing locale data files...');
Oops, something went wrong.

0 comments on commit 36bd26e

Please sign in to comment.