babel-plugin小结

1、babel-plugin-syntax-dynamic-import

需要用到如import的时候

{
    path: 'dashboard',
    component: () => import('@/views/dashboard/test'),
    name: 'Dashboard',
    meta: { title: 'dashboard', icon: 'dashboard', noCache: true }
}
复制代码

# install
npm install babel-plugin-syntax-dynamic-import
复制代码

配置.babelrc

{
  "plugins": ["syntax-dynamic-import"]
}
复制代码

• www.npmjs.com/package/bab…
• babel.bootcss.com/docs/plugin…

2、babel-plugin-transform-vue-jsx

需要用到如下代码的时候

  //...
  render(h, context) {
    const { icon, title } = context.props
    const vnodes = []

    if (icon) {
      vnodes.push(<svg-icon icon-class={icon}/>)
    }

    if (title) {
      vnodes.push(<span slot='title'>{(title)}</span>)
    }
    return vnodes
  }
复制代码

npm install\
  babel-plugin-syntax-jsx\
  babel-plugin-transform-vue-jsx\
  babel-helper-vue-jsx-merge-props\
  babel-preset-env\
  --save-dev
复制代码

配置.babelrc

{
  "presets": ["env"],
  "plugins": ["transform-vue-jsx"]
}
复制代码

• github.com/vuejs/babel…