Publishing a Web Components Dropdown as an npm Package with Babel and Webpack

Component Publishing

To reuse the dropdown Web Component in other projects, we publish it as an npm package. Depending on the package content, we can either use Babel for pure JavaScript or Webpack for bundles that include JSX, Vue, etc.

Publishing with Babel

First initialize the project with npm init and install Babel development dependencies:

npm install @babel/core @babel/node @babel/preset-env @babel/cli --save-dev

Add build scripts to package.json :

"scripts": {
  "build": "babel src/index.js --out-dir lib",
  "prepare": "npm run build",
  "test": "echo \"Error: no test specified\" && exit 1"
}

Create a .babelrc file with the preset:

{
  "presets": ["@babel/preset-env"]
}

Ignore source files in the published package with .npmignore (e.g., src/ ).

Write utility functions in src/index.js (excerpt of Vue‑derived helpers) and run npm run build to generate the compiled code.

Publishing with Webpack

When the component contains non‑JS assets, set up Webpack. Install the bundler:

npm install webpack webpack-cli webpack-dev-server --save-dev

Create webpack.dev.config.js for development and webpack.prod.config.js for production. Example development config:

// webpack.dev.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/public',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    static: './public',
    open: true
  }
};

Production config includes library name and UMD target:

// webpack.prod.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
    library: 'baixiaobai-web-components-dropdown',
    libraryTarget: 'umd'
  },
  devtool: 'source-map'
};

Add module rules for Babel loader if needed, and configure .gitignore and .npmignore accordingly.

After building, publish the package to npm and install it in a project.

Using the Dropdown Component in a Project

Generate a React app with npx create-react-app my-app , install the published package, and import it:

import React from 'react';
import 'baixiaobai-web-components-dropdown';

function App() {
  const props = {
    label: '下拉菜单组件',
    option: 1,
    options: [
      { "label": "黄金糕", "value": 1 },
      { "label": "狮子头", "value": 2 },
      { "label": "螺蛳粉", "value": 3 },
      { "label": "双皮奶", "value": 4 },
      { "label": "蚵仔煎", "value": 5 }
    ]
  };
  React.useEffect(() => {
    document.querySelector('baixiaobai-web-components-dropdown')
      .addEventListener('onOptionChange', event => {
        console.log(event.detail);
      });
  }, []);
  return (
);
}
export default App;

Running the app shows the same dropdown behavior as in the original tutorial, confirming that the Web Component can be used in production projects.

Conclusion

The two‑part tutorial guides you from building a dropdown Web Component to publishing it as an npm package with Babel or Webpack, and finally consuming it in a React application, demonstrating a complete 0→2 workflow for frontend component reuse.