preface

This article is a summary of some of the steps and ideas in our work to develop internal third-party UI components for our company and install them through NPM Install. After learning the publishing method, you can quickly publish your own UI library to NPM for others to use, such as elementUI or Ant Design.

If you want to learn how to publish a JS library or framework, rollup is more suitable for you.

Front-end component/library packaging sharp Rollup use and configuration combat

Implementation effect

First, let’s look at the implementation. For example, we developed a Tag component locally:

At this point we can use the NPM install method to install our components and use.

implementation

First of all, I packaged our UI library based on create-React-app, because it is convenient and simple. Of course, we can also use webPack built by ourselves to implement this process.

1. Jumpstart a project with the Create-React-app:

npx create-react-app alex_xu
cd alex_xu
npm start
Copy the code

2. Design the component library directory structure

We will create components in the SRC directory of the project created by creat-react-app to store our components. We will use app.js to import our components to test the effect. We will put the packaged components directory in the lib directory.

3. Configure package.json file

Package. json is used to set up the component library information and package the script, just like we used to scaffold the project with vue/react.

{
  "name": "@alex_xu/ui"."version": "0.0.1"."description": "A Design UI library for React"."main": "lib/index.js"."module": "es/index.js"."author": "alex_xu"."private": false."license": "MIT"."publishConfig": {
    "registry": "Address of your NPM warehouse"
  },
  "repository": {
    "type": "git"."url": "Git + your Git repository address"
  },
  "bugs": {
    "url": "Issues address"
  },
  "files": [
    "es"."lib"]."homepage": "Home page of component Library"."keywords": [
    "react"."components"."ui"."framework"."frontend"]."peerDependencies": {
    "react": "> = 16.5.0"."react-dom": "> = 16.5.0"
  },
  "scripts": {
    "start": "node scripts/start.js"."build": "node scripts/build.js",},"eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      "0.2%" >."not dead"."not op_mini all"]."development": [
      "last 1 chrome version"."last 1 firefox version"."last 1 safari version"]},"devDependencies": {
    "@babel/cli": "^ 7.6.4." "."@babel/core": "^ 7.6.4." "."@babel/plugin-syntax-dynamic-import": "^ 7.2.0"."@babel/preset-env": "^ 7.6.3." "."@babel/preset-react": "^ 7.6.3." "."babel-plugin-import": "^ 1.12.2." "
  },
  // ...
}

Copy the code

We need to manually configure Babel, so we will install the Babel plugin. The Babel configuration is as follows:

const presets = [
    [
        "@babel/preset-env".// Convert ES6 syntax to ES5
        {
            "useBuiltIns": "usage".// Compile only the code that needs to be compiled
            "corejs": "3.0.1",}],"@babel/preset-react"
];

const plugins = [
    "@babel/plugin-syntax-dynamic-import"["import", { "libraryName": "antd"."style": true}]]module.exports = { presets, plugins }
Copy the code

Next install the Babel module:

npm i @babel/cli @babel/core @babel/preset-env @babel/preset-react -D
Copy the code

In order to set up environment variables that are compatible with multiple platforms, we also need to use cross-env, copy CSS requires CPX,

npm i cross-env cpx -D
Copy the code

Now that the plugins you need to install are complete, you can write shell scripts to package your components (it is recommended to create them in the root directory):

cross-env BABEL_OUTPUT=commonjs babel src/components --out-dir lib/
babel src/components --out-dir es/
Copy the CSS #
cpx \"src/components/**/*.css\" es"
cpx \"src/components/**/*.css\" lib"
Copy the code

Let’s move on to our component library release.

4. Publish the component library

Let’s assume that we have written the first component Tag under Components and export it in components’ index.js:

export { default as Tag } from './Tag';
// ...
Copy the code

Then execute our shell script:

bash build.sh
Copy the code

After the execution, we can find that there are more directories in the root directory of lib and es, even if we package components, one of which complies with the ES specification, one of which complies with the CJS specification.

Release:

npm publish --access public
Copy the code

– access is set the access level of NPM, public | restricted, restricted is restricting access, if you want to open source package, general Settings for the public.

The last

If you want to know more about webpack, gulp, CSS3, javascript, nodeJS, Canvas and other front-end knowledge and actual practice, please join us in the public account “Interesting Talk front-end” to learn and discuss, and explore the boundary of the front-end together.

More recommended

  • Front-end component/library packaging sharp Rollup use and configuration combat
  • A picture shows you how to play vue-Cli3 quickly
  • Vue Advanced Advanced series – Play with Vue and vuex in typescript
  • Learn es6+ new features and es6 core grammar check quickly
  • Implementing a CMS full stack project from 0 to 1 based on nodeJS (Part 1)
  • Implementing a CMS full stack project from 0 to 1 based on nodeJS (middle)
  • Implement a CMS full stack project from 0 to 1 based on nodeJS (Part 2)
  • Implement server startup details for a CMS full stack project from 0 to 1 based on nodeJS
  • Developing travel List with Angular8 and Baidu Maps API
  • “Javascript advanced programming” core knowledge summary
  • With CSS3 to achieve stunning interviewers background that background animation (advanced source)
  • Write a mock data server using nodeJS in 5 minutes
  • Teach you to use 200 lines of code to write a love bean spell H5 small game (with source code)