https://github.com/agirton/webpack-babel-codemod

Convert anonymous webpack commonjs require statements to es2015 import statements
https://github.com/agirton/webpack-babel-codemod

Last synced: 6 days ago
JSON representation

Convert anonymous webpack commonjs require statements to es2015 import statements

• Host: GitHub
• URL: https://github.com/agirton/webpack-babel-codemod
• Owner: agirton
• License: mit
• Created: 2016-02-21T03:55:51.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-02-27T02:32:20.000Z (over 8 years ago)
• Last Synced: 2024-08-02T07:14:11.852Z (3 months ago)
• Language: JavaScript
• Size: 10.7 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-codemods - webpack-babel-codemod - Convert anonymous webpack commonjs require statements to es2015 import statements. (JavaScript)
• awesome-jscodeshift - webpack-babel-codemod - Convert anonymous webpack commonjs require statements to es2015 import statements. (Table of Contents / Codemods)

README

        
## Webpack codemod [![Build Status](https://travis-ci.org/agirton/webpack-babel-codemod.svg?branch=master)](https://travis-ci.org/agirton/webpack-babel-codemod)

When using Babel 5 you could import another js module that's es2015, but you use the commonjs format like so:

```javascript

// foo.js

export default {

  bar: 'bar'

}

// baz.js

require('foo')

```

However under the hood Babel converted this require statement to be, `require('foo').default` because we were exporting a module with the default keyword. Instead of having to rewrite all of these anonymous `require` statements to use the default property, we will just hoist the es2015 `import` statement to the top and then use the `argument` value of the `require` statement as the value.

For example:

```javascript

// from:

import 'foo'

import bar from 'bar'

const baz = {

  qux: require('bundle?lazy!qux'),

  norf: require('bundle?lazy!norf')

}

// to:

import 'foo'

import bar from 'bar'

import qux from 'bundle?lazy!qux';

import norf from 'bundle?lazy!norf';

const baz = {

  qux,

  norf

}

```

### Setup & Run

  * `npm install -g jscodeshift` or install locally `npm install jscodeshift --save-dev`

  * `git clone https://github.com/agirton/webpack-babel-codemod.git`

  * `jscodeshift -t  `

    * If installed locally the command is `./node_modules/.bin/jscodeshift -t  `

  * Use the `-d` option for a dry-run and use `-p` to print the output

    for comparison