Npm peerDependency partial import

Question

The custom package I created and installed via npm has peer dependency - element-ui

This package imports component from element ui:

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

But instead of importing only Pagination component, the whole element-ui lib is being imported in generated js file.

For building assets I use Laravel mix.

This is a snippet from webpack.mix.js

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

When I use the same line of code for import inside my project, not from the custom package, the behavior is correct. Only Pagination is imported.

Thanks!

Answer 1

Solved by pre building my custom package, with the same lines in webpack.config.js

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

Answer 2

I have done it following the documentation of elemen-ui on demand Import Element on demand - ElementUI Vuejs , just a small change so that it works well in laravel.

npm install babel-plugin-component -D

then the babel preset is2015

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

Finally, you create a .babelrc file in the root of your project at the same level as webpack.mix.js, and add the following:

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