Question

我通过npm创建和安装的自定义程序包具有对等依赖项 - element-ui

此包从元素ui导入组件：

import {Pagination} from 'element-ui';'

但是，不是只导入Pagination组件，而是在生成的js文件中导入整个元素-ui lib。

对于建筑资产，我使用Laravel mix。

这是来自webpack.mix.js的片段

babel: {
    "presets": [
        ["es2015", {"modules": false, "targets": {
                "browsers": ["> 5%", "ie >= 9"]
            }}]
    ],
    "plugins": [["component", [
        {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-default"
        }
    ]]]
}

当我在项目中使用相同的代码行进行导入时，而不是从自定义包中导入，行为是正确的。只导入分页。

谢谢！

Answer 1

通过预先构建我的自定义包解决，在webpack.config.js中使用相同的行

    "plugins": [["component", [
    { 
         "libraryName": "element-ui",
          "styleLibraryName": "theme-default"
        }
    ]]]

Answer 2

我按照elemen-ui on demand Import Element on demand - ElementUI Vuejs的文档完成了它，只是一个小小的改动，以便它在laravel中运行良好。

npm install babel-plugin-component -D

然后babel预设为2015

npm install --save-dev babel-preset-es2015

最后，在项目的根目录中创建一个与webpack.mix.js相同级别的.babelrc文件，并添加以下内容：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component", 
      [
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-default"
        }
      ]
    ]
    ]
}

Npm peerDependency部分导入

2 个答案: