乐趣区

关于前端:造轮子不妨发个组件到-npm

jiezi

1. 创立我的项目

mkdir component-template && cd component-template
npm init

npm init会弹出项目名称、版本、形容等信息，依照本人须要填写即可。

执行完以上 shell 命令后会生成一个含有 package.json 的空我的项目, 咱们批改文件目录如下：

component-template
├─ config
│  ├─ webpack.config.base.js
│  ├─ webpack.config.dev.js
│  └─ webpack.config.prod.js
├─ demo // 测试组件用
│  ├─ index.html
│  └─ index.js
├─ src // 源代码目录
│  ├─ index.js
│  └─ index.less
├─ babel.config.json
└─ package.json

2. 装置依赖

  • 装置 React 相干依赖
npm i react react-dom --save-dev
  • 装置 webpack 相干依赖
npm i webpack webpack-cli webpack-dev-server webpack-merge clean-webpack-plugin --save-dev

其中，clean-webpack-plugin 是为了每次打包革除掉前一次的内容。

  • 装置 babel 相干依赖
npm i @babel/cli @babel/core @babel/preset-env @babel/preset-react --save-dev
  • 装置 babel-loader
npm i babel-loader --save-dev
  • 装置款式相干 loader(这里应用 less 来开发组件)
npm i style-loader css-loader less less-loader --save-dev

3. 配置 webpack

  • 配置 webpack.config.base.js 作为公共配置
const path = require('path');

module.exports = {
  module: {
    rules: [
      {test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {modules: true}
          }
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {modules: true}
          },
          'less-loader'
        ]
      },
      {test: /\.(jpg|jpeg|png|gif|svg)$/,
        type: 'asset',
        parser: {
          // 转 base64 条件
          dataUrlCondition: {maxSize: 8 * 1024}
        },
        generator: {filename: 'img/[name].[hash:6][ext]'
        }
      }
    ]
  },
  // 配置下别名和扩展名优先级, 为了引入时书写不便
  resolve: {
    alias: {'@': path.resolve(__dirname, '../src/')
    },
    extensions: ['.js', '.jsx', '.json']
  }
};
  • 配置 webpack.config.dev.js 作为开发配置
const path = require('path');
const {merge} = require('webpack-merge');
const baseConfig = require('./webpack.config.base.js');

const devConfig = {
  mode: 'development',
  entry: path.join(__dirname, '../demo/index.js'),
  output: {path: path.join(__dirname, '../demo/'),
    filename: 'bundle.js'
  },
  devServer: {static: path.join(__dirname, '../demo/'),
    compress: true,
    host: '127.0.0.1',
    port: 8899,
    open: true
  }
};

module.exports = merge(devConfig, baseConfig);

须要留神的是, 开发配置是为了实时预览成果，入口是 demo/index.js。打包产生的 bundle.js 在内存中，不会在 demo 文件夹理论生成。

  • 配置 webpack.config.prod.js 作为打包配置：
const path = require('path');
const {merge} = require('webpack-merge');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

const baseConfig = require('./webpack.config.base.js'); // 援用公共的配置

const prodConfig = {
  mode: 'production',
  entry: path.join(__dirname, '../src/index.js'),
  output: {path: path.join(__dirname, '../lib/'),
    filename: 'index.js',
    libraryTarget: 'umd',
    libraryExport: 'default'
  },
  plugins: [new CleanWebpackPlugin()],
  optimization: {minimize: true},
  externals: {
    // 内部依赖
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react'
    },
    'react-dom': {
      root: 'ReactDOM',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom'
    }
  }
};

module.exports = merge(prodConfig, baseConfig);

4. 配置 babel

在 babel.config.js 中配置：

module.exports = {presets: ['@babel/preset-env', '@babel/preset-react']
};

至此，所有配置已实现。接下来咱们开发组件。

5. 开发组件

咱们写一个简略的组件。一个宽高各 200px 的盒子，文本程度、垂直居中。

// src/index.js:
import React from 'react';
import styles from './index.less';

const Test = (props) => {const { text = '测试'} = props;
  return (
    <>
      <div className={styles.box}>{text}</div>
    </>
  );
};

export default Test;
// src/index.less
.box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    font-size: 16px;
    color: #fff;
    background-color: #ff0000;
}

6. 测试成果

在 demo/index.html 增加如下代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <script src="./bundle.js"></script>
</body>

</html>

在demo/index.js 增加以下代码：

import React from 'react';
import {render} from 'react-dom';

import Test from '../src';
const App = () => (<div style={{ width: '100vw', height: '100vh'}}>
    <Test text='哈哈' />
  </div>
);

render(<App />, document.getElementById('root'));

批改 package.json 里的运行脚本，如下：

  ...
  "scripts": {
    "start": "webpack-dev-server --config config/webpack.config.dev.js",
    "build": "webpack --config config/webpack.config.prod.js",
    "pub": "npm run build && npm publish"
  },
  ...

npm run start看一下组件成果。确认没问题，那咱们就 npm run build 打包。

7. 公布

依据本人须要，书写应用文档 README.md, 增加一下.npmignore，如下：

node_modules/
src/
demo/
config/
babel.config.json
.gitignore

npm login登录本人的账号

在我的项目根目录，npm publish即可公布本人的 npm 包。

到 npm 平台上关上本人的账户，就能够查看本人的 npm 包了。

本文由 mdnice 多平台公布

退出移动版