-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(build): split ES bundle to leverage treeshaking
fix #30
- Loading branch information
1 parent
a4163b7
commit 9d22cba
Showing
9 changed files
with
156 additions
and
60 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
# Builds | ||
|
||
The [`dist` directory of the npm package](https://cdn.jsdelivr.net/npm/chusho/dist/) contains different builds: | ||
|
||
| Filename | Module type | JavaScript version | Environment | Package.json field | About | | ||
| ----------------- | ----------- | ------------------ | ----------- | ------------------ | ------------------------------------------------------- | | ||
| chusho.js | CommonJS | ES5<sup>1</sup> | Development | main | Used by old bundlers: Webpack 1, Browserify, … | | ||
| chusho.min.js | CommonJS | ES5<sup>1</sup> | Production | - | | | ||
| chusho.umd.js | UMD | ES5<sup>1</sup> | Development | umd:main | To be used in the browser with a `<script />` tag | | ||
| chusho.umd.min.js | UMD | ES5<sup>1</sup> | Production | - | | | ||
| esm/chusho.js | ES Module | ES2019<sup>2</sup> | Development | module | Used by modern bundlers: Vue CLI, Webpack 2+, Rollup, … | | ||
|
||
<sup>1</sup> ES5 is supported by all recent browsers and IE 11. | ||
|
||
<sup>2</sup> ES2019 is supported only by the most recent browsers. | ||
|
||
## Browsers support | ||
|
||
If you’re using Vue CLI, Webpack 2+, Rollup or another modern bundler, it’s probably going to import the ES Module described above. This is great as it will automatically enable [tree-shaking](https://en.wikipedia.org/wiki/Tree_shaking) and remove unused code from your app bundle. | ||
|
||
However this version targets modern browsers (supporting ES2019 features), therefor if you need to support older browsers, you’ll have to transpile Chūshō’s code. | ||
|
||
### Vue CLI | ||
|
||
To transpile for older browsers using Vue CLI, you need to add it to the `transpileDependencies` array in [`vue.config.js`](https://cli.vuejs.org/config/#vue-config-js): | ||
|
||
```js{4} | ||
// vue.config.js | ||
module.exports = { | ||
transpileDependencies: ['chusho'] | ||
} | ||
``` | ||
|
||
### Webpack & Babel | ||
|
||
To transpile for older browsers using a custom Webpack setup, you need to adapt your JavaScript loader configuration to include Chūshō. Usually it’s configured like this: | ||
|
||
```js{10} | ||
// webpack.config.js | ||
module.exports = { | ||
// ... | ||
module: { | ||
rules: [ | ||
{ | ||
test: /\.js$/, | ||
loader: 'babel-loader', | ||
exclude: /node_modules/, | ||
}, | ||
], | ||
}, | ||
// ... | ||
}; | ||
``` | ||
|
||
Instead of excluding all `node_modules`, adapt the Regex to include Chūshō: | ||
|
||
```js{5} | ||
// ... | ||
exclude: /node_modules\/(?!chusho)/, | ||
// ... | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
--- | ||
next: /guide/components/ | ||
next: /guide/using-components.html | ||
--- | ||
|
||
# Styling components | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
--- | ||
next: /guide/components/ | ||
--- | ||
|
||
# Using components | ||
|
||
Components aren’t registered automatically to take advantage of bundler’s [tree-shaking](https://en.wikipedia.org/wiki/Tree_shaking) optimizations by default. | ||
|
||
You need to register Chūshō’s components you want to use either globally, for example in your main entry point: | ||
|
||
```js{6-7} | ||
import { createApp } from 'vue'; | ||
import { CBtn, CIcon } from 'chusho'; | ||
const app = createApp(App); | ||
app.component('CBtn', CBtn); | ||
app.component('CIcon', CIcon); | ||
``` | ||
|
||
Or locally in the components they are used: | ||
|
||
```vue{11,17-19} | ||
<template> | ||
<CToggle> | ||
<CToggleBtn>...</CToggleBtn> | ||
<CToggleContent> | ||
<!-- ... --> | ||
</CToggleContent> | ||
</CToggle> | ||
</template> | ||
<script> | ||
import { CToggle, CToggleBtn, CToggleContent } from 'chusho'; | ||
export default { | ||
name: 'MyComponent', | ||
components: { | ||
CToggle, | ||
CToggleBtn, | ||
CToggleContent, | ||
}, | ||
// ... | ||
}; | ||
</script> | ||
``` |