umi 无法使用 babel-plugin-import 插件

Created on 21 Jan 2019 · 3Comments · Source: umijs/umi

犹豫打包项目太大，我使用了babel-plugin-import做按需加载.
但是写在配置文件.umirc.js里

export default {
    plugins: [
        ['umi-plugin-dva', { immer: true }],
        ['import', { libraryName: "antd", style: "css" }],
    ],
}
// 会出现下面的问题
Plugin umi-plugin-react can't be resolved, please make sure you have installed it.

Try:

  npm install umi-plugin-react --save-dev

如果这样写

export default {
    plugins: [
        ['umi-plugin-dva', { immer: true }],
        [require.resolve('babel-plugin-import'), { libraryName: "antd", style: "css" }],
    ],
}
// 会出现下面的问题
/Users/xxx/.config/yarn/global/node_modules/af-webpack/lib/getUserConfig/index.js:51
  throw new Error(msg);
        ^
Error: Configuration item options is not valid, please remove it.
    at throwError (/Users/xxx/.config/yarn/global/node_modules/af-webpack/lib/getUserConfig/index.js:51:9)
    at getUserConfig (/Users/xxx/.config/yarn/global/node_modules/af-webpack/lib/getUserConfig/index.js:165:5)
    at Service.getWebpackRCConfig (/Users/xxx/.config/yarn/global/node_modules/umi-build-dev/lib/Service.js:120:39)
    at Service.build (/Users/xxx/.config/yarn/global/node_modules/umi-build-dev/lib/Service.js:384:33)
    at Object.build [as default] (/Users/xxx/.config/yarn/global/node_modules/umi-build-dev/lib/build.js:14:18)
    at _default (/Users/xxx/.config/yarn/global/node_modules/umi/lib/build.js:19:52)
    at Object.<anonymous> (/Users/xxx/.config/yarn/global/node_modules/umi/lib/scripts/build.js:12:20)
    at Module._compile (internal/modules/cjs/loader.js:722:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:733:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:775:12)
    at startup (internal/bootstrap/node.js:300:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:826:3)

这是devDependencies:

"umi": "^1.0.0",
"devDependencies": {
    "@babel/polyfill": "^7.0.0-beta.55",
    "babel-plugin-import": "^1.11.0",
    "babel-plugin-module-resolver": "^3.1.1",
    "eslint": "^4.14.0",
    "eslint-config-umi": "^0.1.1",
    "eslint-plugin-flowtype": "^2.34.1",
    "eslint-plugin-import": "^2.6.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.1.0",
    "husky": "^0.12.0",
    "less-vars-to-js": "^1.2.1",
    "webpack-cli": "^3.2.1"
  }

请大神指点🙏🙏🙏

Source

stoneWeb

Most helpful comment

babel 的插件需要额外配置到 extraBabelPlugins ， umi-plugin-dva ，建议和 umi-plugin-react 一起使用。
~~报错可能是由于这里的依赖 https://github.com/umijs/umi/blob/master/packages/umi-build-dev/src/plugins/commands/ui/.umirc.js#L13~~
我这里新起一个项目，只使用 umi-plugin-dva 没有报错，你试试看还会不会报错：

export default {
  treeShaking: true,
  plugins: [
    ['umi-plugin-dva', {
      immer: true,
    }],
  ],
  extraBabelPlugins: [
    ['import', { libraryName: "antd", style: "css" }],
  ],
}

imhele on 21 Jan 2019

👍6

All 3 comments

export default {
  treeShaking: true,
  plugins: [
    ['umi-plugin-dva', {
      immer: true,
    }],
  ],
  extraBabelPlugins: [
    ['import', { libraryName: "antd", style: "css" }],
  ],
}

imhele on 21 Jan 2019

👍6

@stoneWeb @imhele umi-plugin-react不是内置了antd的import吗为何你们还要自己引入？
看这里
设置antd:true会默认引入，但是我为何打包vendor文件轻轻松松就800多KB了，我一度认为我没有用好这个按需引入我去测一下到底这个功能有没有真的用到