mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-27 10:30:28 +00:00
f79856a6d7
Having the ability to write your plugins with ES2015 syntax is nice but it is missing a large part of the ES2015 spec. Since not all browsers support this a polyfill is offered. So far it is IE10 which holds the need for the polyfill. This tiddler offers a simple how to on adding the babel-polyfill to your TiddlyWiki. NOTE: This how to would be obsolete if a proper ES2015 polyfill was part of the official plugins offered in core. (Want a pull request?)
66 lines
2.4 KiB
Plaintext
66 lines
2.4 KiB
Plaintext
modified: 20160112175006000
|
|
created: 20160112025328000
|
|
title: Adding Babel Polyfill to TiddlyWiki
|
|
tags: documenting Concepts
|
|
type: text/vnd.tiddlywiki
|
|
|
|
Not all browsers support the latest features of ES2015. The Babel project offers a polyfill that can be included into your TiddlyWiki so those features can be available to your plugins. To do this you will need a copy of the polyfill source.
|
|
|
|
You can obtain the source either through <<.def "npm">> or downloaded/saved. See the [[Babel Polyfill documentation|https://babeljs.io/docs/usage/polyfill/]] for specific information on installing it.
|
|
|
|
In your TiddlyWiki editions folder make sure you have a `plugins/babel-polyfill` folder. Then create the `plugins/babel-polyfill/plugin.info` file with the following in it:
|
|
|
|
```json
|
|
{
|
|
"title": "$:/plugins/babel/babel-polyfill",
|
|
"description": "Babel Polyfills for ES2015 support",
|
|
"author": "Your Name Here",
|
|
"core-version": ">=5.0.0"
|
|
}
|
|
```
|
|
|
|
Create the folder `plugins/babel-polyfill/files` folder. Then create the `plugins/babel-polyfill/files/tiddlywiki.files` file with the following in it:
|
|
|
|
```json
|
|
{
|
|
"tiddlers": [
|
|
{
|
|
"file": "polyfill.min.js",
|
|
"fields": {
|
|
"title": "$:/plugins/babel/babel-polyfill/polyfill.min.js",
|
|
"type": "application/javascript",
|
|
"module-type": "library",
|
|
"global-module": "true"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
Now copy the `polyfill.min.js` you downloaded/saved.
|
|
|
|
<<.tip "If you downloaded this via ''npm'' then it would be available in `./node_modules/babel-polyfill/dist/polyfill.min.js`.">>
|
|
|
|
Lastly you need a initializer so create the `plugins/babel-polyfill/plugin.js` file with the following in it:
|
|
|
|
```javascript
|
|
/*\
|
|
title: $:/plugins/babel/babel-polyfill/plugin.js
|
|
type: application/javascript
|
|
module-type: startup
|
|
|
|
Load the babel-polyfill library on startup
|
|
|
|
\*/
|
|
|
|
exports.startup = function() {
|
|
$tw.modules.execute('$:/plugins/babel/babel-polyfill/polyfill.min.js');
|
|
}
|
|
```
|
|
|
|
<<.warning "Because the polyfill is meant to be used in the browser we need to conditionally load the library which ES2016 doesn't allow. This is why it is written using TiddlyWiki's dependency resolver instead of using ES2015 `import` statements.">>
|
|
|
|
Now all the //runtime// ES2015 features are available like using `Promise` in your plugin code.
|
|
|
|
See [[Using ES2016 for Writing Plugins]] on how to use the ES2015 //syntax// for your plugin code.
|