https://github.com/sampsonli/babel_plugin_webpack_dynamic_import

dynamic import
https://github.com/sampsonli/babel_plugin_webpack_dynamic_import

Last synced: about 1 month ago
JSON representation

dynamic import

• Host: GitHub
• URL: https://github.com/sampsonli/babel_plugin_webpack_dynamic_import
• Owner: sampsonli
• License: mit
• Created: 2020-01-01T15:08:59.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-04-25T11:28:35.000Z (almost 5 years ago)
• Last Synced: 2024-10-28T06:29:50.207Z (3 months ago)
• Language: TypeScript
• Size: 4.88 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# babel-plugin-webpack-dynamic-import

Babel plugin to transpile `import()` to a deferred `require.ensure()`. and add below code, you can control your module hot reload more flexible

~~~javascript

require.ensure([], (require) => {

     const result = require(SOURCE);

     resolve(result);

     if(module.hot) {

        Promise.resolve().then(() => {

            typeof result.onUpdate === 'function' && module.hot.accept(SOURCE, () => {

                result.onUpdate(require(SOURCE));

            });

        })

     }

}, MODEL);

~~~

you can declare onUpdate method on your module when changing

**NOTE:** Babylon >= v6.12.0 is required to correctly parse dynamic imports.

## Installation

```sh

npm install babel-plugin-webpack-dynamic-import --save-dev

```

## Usage

### Via `.babelrc` (Recommended)

**.babelrc**

```json

{

  "plugins": ["webpack-dynamic-import"]

}

```

#### Options

```json

{

  "plugins": "webpack-dynamic-import"

}

```

### Via CLI

```sh

$ babel --plugins dynamic-import-node script.js

```

### Via Node API

```javascript

require('babel-core').transform('code', {

  plugins: ['webpack-dynamic-import']

});

```