Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/egoist/aot-loader
Load and pre-evaluate code at compile time
https://github.com/egoist/aot-loader
aot babel pre-evaluate webpack
Last synced: 14 days ago
JSON representation
Load and pre-evaluate code at compile time
- Host: GitHub
- URL: https://github.com/egoist/aot-loader
- Owner: egoist
- License: mit
- Created: 2018-05-25T04:07:34.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-12-25T14:32:14.000Z (almost 3 years ago)
- Last Synced: 2024-10-10T10:53:43.054Z (27 days ago)
- Topics: aot, babel, pre-evaluate, webpack
- Language: JavaScript
- Homepage:
- Size: 57.6 KB
- Stars: 16
- Watchers: 4
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# aot-loader
[](https://npmjs.com/package/aot-loader) [](https://npmjs.com/package/aot-loader) [](https://circleci.com/gh/egoist/aot-loader/tree/master) [](https://github.com/egoist/donate) [](https://chat.egoist.moe)
__This is similar to [babel-plugin-preval](https://github.com/kentcdodds/babel-plugin-preval) except that this is a webpack loader, which means you can write asynchronous code but import the resolved data synchronously.__
__It's also similar to [val-loader](https://github.com/webpack-contrib/val-loader) but this loader returns resolved data as JSON object directly.__
## Install
```bash
yarn add aot-loader --dev
```
## Usage
Import a file that you intend to pre-evaluate:
📝 __entry.js__:
```js
import data from './data?aot'
console.log(data)
```
📝 __data.js__:
```js
const axios = require('axios')
module.exports = async () => {
const posts = await axios.get('http://example.com/posts.json')
return { posts }
}
```
Then update your webpack config to pre-evaluate `.js` files with `?aot` query at compile time:
📝 __webpack.config.js__:
```js
module.exports = {
entry: './entry.js',
module: {
rules: [
{
test: /\.js$/,
enforce: 'post',
resourceQuery: /\?aot$/,
loader: 'aot-loader'
},
// Following is optional, depending on your needs
{
test: /\.js$/,
loader: 'babel-loader'
}
]
}
}
```
### Without resource query
```js
import data from /* aot */ './data'
// ↓↓↓ transpiled to:
import data from './data?aot'
```
To achieve this, you can use the aot babel plugin in your `.babelrc`:
```js
{
"plugins": [
"module:aot-loader/babel"
]
}
```
## API
### Loader options
#### getData
- __Type__: `(exported, context) => data || Promise`
Get data from the exported object of the file that is being evaluated.
Default value:
```js
function (exported, context) {
return typeof exported === 'function' ? exported(context) : exported
}
```
#### context
The `context` argument in `getData`.
Default:
```js
{
loader: LoaderContext
}
```
Check out the [LoaderContext](https://webpack.js.org/api/loaders/#the-loader-context) API.
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Author
**aot-loader** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.
Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/aot-loader/contributors)).
> [github.com/egoist](https://github.com/egoist) · GitHub [@egoist](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)