Skip to content

Commit

Permalink
⭐ new: ES modules for browser (#561)
Browse files Browse the repository at this point in the history
* ⭐ new: ES modules for browser

* 📌 dependency: remove uglify-js

* 📝 docs(dist): update dist/README.md

* 📝 docs(vuepress): update installation
  • Loading branch information
kazupon authored Apr 14, 2019
1 parent a1800cb commit c9b9adf
Show file tree
Hide file tree
Showing 6 changed files with 55 additions and 97 deletions.
6 changes: 3 additions & 3 deletions config/bundle.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ const fs = require('fs')
const path = require('path')
const zlib = require('zlib')
const rollup = require('rollup')
const uglify = require('uglify-js')
const terser = require('terser')

module.exports = build

Expand All @@ -28,8 +28,8 @@ function buildEntry (config) {
.then(bundle => bundle.generate(output))
.then(({ code }) => {
if (isProd) {
var minified = (banner ? banner + '\n' : '') + uglify.minify(code, {
fromString: true,
var minified = (banner ? banner + '\n' : '') + terser.minify(code, {
toplevel: true,
output: {
ascii_only: true
},
Expand Down
23 changes: 21 additions & 2 deletions config/entry.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,22 @@ const entries = {
env: 'development',
moduleName,
banner
},
browser_development: {
entry: 'src/index.js',
dest: resolve(`dist/${pack.name}.esm.browser.js`),
format: 'es',
env: 'development',
moduleName,
transpile: false
},
browser_production: {
entry: 'src/index.js',
dest: resolve(`dist/${pack.name}.esm.browser.min.js`),
format: 'es',
env: 'production',
moduleName,
transpile: false
}
}

Expand All @@ -61,8 +77,7 @@ function genConfig (opts) {
plugins: [
flow(),
node(),
cjs(),
buble()
cjs()
]
}

Expand All @@ -72,6 +87,10 @@ function genConfig (opts) {
}
config.plugins.push(replace(replacePluginOptions))

if (opts.transpile !== false) {
config.plugins.push(buble())
}

return config
}

Expand Down
13 changes: 8 additions & 5 deletions dist/README.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
## Explanation of Build Files
## Explanation of Different Builds

- UMD: vue-i18n.js
- CommonJS: vue-i18n.common.js
- ES Module: vue-i18n.esm.js
- UMD: `vue-i18n.js`
- CommonJS: `vue-i18n.common.js`
- ES Module for bundlers: `vue-i18n.esm.js`
- ES Module for browsers: `vue-i18n.esm.browser.js`

### Terms

- **[UMD](https://github.com/umdjs/umd)**: UMD builds can be used directly in the browser via a `<script>` tag. The default file from Unpkg CDN at [https://unpkg.com/vue-i18n](https://unpkg.com/vue-i18n) is the UMD build (`vue-i18n.js`).

- **[CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1)**: CommonJS builds are intended for use with older bundlers like [browserify](http://browserify.org/) or [webpack 1](https://webpack.github.io). The default file for these bundlers (`pkg.main`) is the Runtime only CommonJS build (`vue-i18n.common.js`).

- **[ES Module](http://exploringjs.com/es6/ch_modules.html)**: ES module builds are intended for use with modern bundlers like [webpack 2](https://webpack.js.org) or [rollup](http://rollupjs.org/). The default file for these bundlers (`pkg.module`) is the Runtime only ES Module build (`vue-i18n.esm.js`).
- **[ES Module](http://exploringjs.com/es6/ch_modules.html)**: starting in 8.11 VueI18n provides two ES Modules (ESM) builds:
- ESM for bundlers: intended for use with modern bundlers like [webpack 2](https://webpack.js.org) or [Rollup](https://rollupjs.org/). ESM format is designed to be statically analyzable so the bundlers can take advantage of that to perform "tree-shaking" and eliminate unused code from your final bundle. The default file for these bundlers (`pkg.module`) is the Runtime only ES Module build (`vue-i18n.esm.js`).
- ESM for browsers (8.11+ only, `vue-i18n.esm.browser.js`): intended for direct imports in modern browsers via `<script type="module">`.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,8 @@
"rollup-plugin-replace": "^2.0.0",
"selenium-server": "2.53.1",
"sinon": "^2.1.0",
"terser": "^3.17.0",
"typescript": "^2.4.1",
"uglify-js": "^2.7.5",
"vue": "^2.5.17",
"vue-template-compiler": "^2.5.17",
"vuepress": "^0.14.0",
Expand Down
19 changes: 19 additions & 0 deletions vuepress/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,3 +65,22 @@ cd node_modules/vue-i18n
npm install # or `yarn`
npm run build # or `yarn run build`
```

## Explanation of Different Builds

In the dist/ [directory of the NPM package](https://cdn.jsdelivr.net/npm/vue-i18n/dist/) you will find many different builds of VueI18n. Here’s an overview of the difference between them:

- UMD: `vue-i18n.js`
- CommonJS: `vue-i18n.common.js`
- ES Module for bundlers: `vue-i18n.esm.js`
- ES Module for browsers: `vue-i18n.esm.browser.js`

### Terms

- **[UMD](https://github.com/umdjs/umd)**: UMD builds can be used directly in the browser via a `<script>` tag. The default file from Unpkg CDN at [https://unpkg.com/vue-i18n](https://unpkg.com/vue-i18n) is the UMD build (`vue-i18n.js`).

- **[CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1)**: CommonJS builds are intended for use with older bundlers like [browserify](http://browserify.org/) or [webpack 1](https://webpack.github.io). The default file for these bundlers (`pkg.main`) is the Runtime only CommonJS build (`vue-i18n.common.js`).

- **[ES Module](http://exploringjs.com/es6/ch_modules.html)**: starting in 8.11 VueI18n provides two ES Modules (ESM) builds:
- ESM for bundlers: intended for use with modern bundlers like [webpack 2](https://webpack.js.org) or [Rollup](https://rollupjs.org/). ESM format is designed to be statically analyzable so the bundlers can take advantage of that to perform "tree-shaking" and eliminate unused code from your final bundle. The default file for these bundlers (`pkg.module`) is the Runtime only ES Module build (`vue-i18n.esm.js`).
- ESM for browsers (8.11+ only, `vue-i18n.esm.browser.js`): intended for direct imports in modern browsers via `<script type="module">`.
89 changes: 3 additions & 86 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1871,15 +1871,6 @@ algoliasearch@^3.24.5:
semver "^5.1.0"
tunnel-agent "^0.6.0"

align-text@^0.1.1, align-text@^0.1.3:
version "0.1.4"
resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
integrity sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=
dependencies:
kind-of "^3.0.2"
longest "^1.0.1"
repeat-string "^1.5.2"

alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
Expand Down Expand Up @@ -2939,11 +2930,6 @@ camelcase-keys@^4.0.0:
map-obj "^2.0.0"
quick-lru "^1.0.0"

camelcase@^1.0.2:
version "1.2.1"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
integrity sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=

camelcase@^2.0.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
Expand Down Expand Up @@ -2989,14 +2975,6 @@ caseless@~0.12.0:
resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=

center-align@^0.1.1:
version "0.1.3"
resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
integrity sha1-qg0yYptu6XIgBBHL1EYckHvCt60=
dependencies:
align-text "^0.1.3"
lazy-cache "^1.0.3"

chai-nightwatch@~0.1.x:
version "0.1.1"
resolved "https://registry.yarnpkg.com/chai-nightwatch/-/chai-nightwatch-0.1.1.tgz#1ca56de768d3c0868fe7fc2f4d32c2fe894e6be9"
Expand Down Expand Up @@ -3148,15 +3126,6 @@ clipboardy@^1.2.2:
arch "^2.1.0"
execa "^0.8.0"

cliui@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
integrity sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=
dependencies:
center-align "^0.1.1"
right-align "^0.1.1"
wordwrap "0.0.2"

cliui@^4.0.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.1.0.tgz#348422dbe82d800b3022eef4f6ac10bf2e4d1b49"
Expand Down Expand Up @@ -4090,7 +4059,7 @@ decamelize-keys@^1.0.0:
decamelize "^1.1.0"
map-obj "^1.0.0"

decamelize@^1.0.0, decamelize@^1.1.0, decamelize@^1.1.2, decamelize@^1.2.0:
decamelize@^1.1.0, decamelize@^1.1.2, decamelize@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
Expand Down Expand Up @@ -7304,11 +7273,6 @@ latest-version@^3.0.0:
dependencies:
package-json "^4.0.0"

lazy-cache@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
integrity sha1-odePw6UEdMuAhF07O24dpJpEbo4=

lazystream@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/lazystream/-/lazystream-1.0.0.tgz#f6995fe0f820392f61396be89462407bb77168e4"
Expand Down Expand Up @@ -7656,11 +7620,6 @@ lolex@^1.6.0:
resolved "https://registry.yarnpkg.com/lolex/-/lolex-1.6.0.tgz#3a9a0283452a47d7439e72731b9e07d7386e49f6"
integrity sha1-OpoCg0UqR9dDnnJzG54H1zhuSfY=

longest@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=

loose-envify@^1.0.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
Expand Down Expand Up @@ -10208,13 +10167,6 @@ rfdc@^1.1.2:
resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.1.2.tgz#e6e72d74f5dc39de8f538f65e00c36c18018e349"
integrity sha512-92ktAgvZhBzYTIK0Mja9uen5q5J3NRVMoDkJL2VMwq6SXjVCgqvQeVP2XAaUY6HT+XpQYeLSjb3UoitBryKmdA==

right-align@^0.1.1:
version "0.1.3"
resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
integrity sha1-YTObci/mo1FWiSENJOFMlhSGE+8=
dependencies:
align-text "^0.1.1"

rimraf@2.6.3, rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.0, rimraf@^2.6.1, rimraf@^2.6.2:
version "2.6.3"
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
Expand Down Expand Up @@ -10757,7 +10709,7 @@ source-map@0.5.6:
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
integrity sha1-dc449SvwczxafwwRjYEzSiu19BI=

source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1:
source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7:
version "0.5.7"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
Expand Down Expand Up @@ -11278,7 +11230,7 @@ terser-webpack-plugin@^1.1.0:
webpack-sources "^1.1.0"
worker-farm "^1.5.2"

terser@^3.16.1:
terser@^3.16.1, terser@^3.17.0:
version "3.17.0"
resolved "https://registry.yarnpkg.com/terser/-/terser-3.17.0.tgz#f88ffbeda0deb5637f9d24b0da66f4e15ab10cb2"
integrity sha512-/FQzzPJmCpjAH9Xvk2paiWrFq+5M6aVOf+2KRbwhByISDX/EujxsK+BAvrhb6H+2rtrLCHK9N01wO014vrIwVQ==
Expand Down Expand Up @@ -11564,16 +11516,6 @@ uglify-js@3.4.x:
commander "~2.19.0"
source-map "~0.6.1"

uglify-js@^2.7.5:
version "2.8.29"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
integrity sha1-KcVzMUgFe7Th913zW3qcty5qWd0=
dependencies:
source-map "~0.5.1"
yargs "~3.10.0"
optionalDependencies:
uglify-to-browserify "~1.0.0"

uglify-js@^3.1.4:
version "3.5.2"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.5.2.tgz#dc0c7ac2da0a4b7d15e84266818ff30e82529474"
Expand All @@ -11582,11 +11524,6 @@ uglify-js@^3.1.4:
commander "~2.19.0"
source-map "~0.6.1"

uglify-to-browserify@~1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
integrity sha1-bgkk1r2mta/jSeOabWMoUKD4grc=

ultron@~1.1.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
Expand Down Expand Up @@ -12295,16 +12232,6 @@ widest-line@^2.0.0:
dependencies:
string-width "^2.1.1"

window-size@0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
integrity sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=

wordwrap@0.0.2:
version "0.0.2"
resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
integrity sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=

wordwrap@^1.0.0, wordwrap@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
Expand Down Expand Up @@ -12585,16 +12512,6 @@ yargs@^12.0.5:
y18n "^3.2.1 || ^4.0.0"
yargs-parser "^11.1.1"

yargs@~3.10.0:
version "3.10.0"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
integrity sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=
dependencies:
camelcase "^1.0.2"
cliui "^2.1.0"
decamelize "^1.0.0"
window-size "0.1.0"

yauzl@2.4.1:
version "2.4.1"
resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.4.1.tgz#9528f442dab1b2284e58b4379bb194e22e0c4005"
Expand Down

0 comments on commit c9b9adf

Please sign in to comment.