how to ignore import & require statement

@kitten as a npm package，we always have to import third packages，like so：

import {get} from 'lodash'

class Demo1 extends React.Component {
  render () {
    // do something with get
  }
}

actually，we prefer to use scope to pass global variables。and this will throw an error。

so do you have some support on such an ignore statement?

[mathieudutour]

you’re welcome?

[mathieudutour]

you can use the transformCode props on LiveProvider:

const importRegex = /import(?:["'\s]*([\w*{}\n, ]+)from\s*)["'\s]*([@\w/_-]+)["'\s]*;?/gm
const requireRegex = /(const|let|var)\s*([\w{}\n, ]+\s*)=\s*require\s*\(["'\s]*([@\w/_-]+)["'\s]*\s*\);?/gm
const imports = {
 lodash: 'Lodash'
}

const transformCode = (code) => {
  return code.replace(importRegex, (match, p1, p2) => {
    const matchingImport = imports[p2]
    if (!matchingImport) {
      // leave it alone if we don't have a matching import
      return match
    }

    return 'var ' + p1 + ' = ' + matchingImport + ';'
  })
  .replace(requireRegex, (match, p1, p2, p3) => {
    const matchingImport = imports[p3]
    if (!matchingImport) {
      // leave it alone if we don't have a matching import
      return match
    }

    return p1 + ' ' + p2 + ' = ' + matchingImport + ';'
  })
}

and pass Lodash in the scope