r-form-antd

依赖antd快速创建自定义form表单组件

Usage no npm install needed!

<script type="module">
  import rFormAntd from 'https://cdn.skypack.dev/r-form-antd';
</script>

README

webpack安装

  • 本地安装
  • yarn add webpack webpack-cli -D

手工配置webpack

  • 默认配置文件 webpack.config.js
  • package.json script配置,"start": "npx webpack --config ./build/dev.config.js",
"scripts": {
    "test": "jest",
    "dev": "npx webpack-dev-server --config ./build/dev.config.js",
    "start": "npx webpack --config ./build/dev.config.js",
    "prod": "npx webpack --config ./build/prod.config.js"
},

配置css和less的module的rules规则

  • less 可以引入 css
  • css 不可以引入 less
  • { loader: 'css-loader?modules&localIdentName=[name]-[hash:base64:5]', },
    {
        test: /\.less$/,
        use: [ // 顺序问题 先右后左 先下后上
        { 
            loader: "style-loader",
            options: {
            insert: function(element) { // // 将css插入head 可以指定位置
                var parent = document.querySelector('head');
                parent.insertBefore(element, parent.firstChild);
            }
            }
        },
        {
            loader: "css-loader", // @import 语法 
        },
        {
            loader: "postcss-loader",
            options: {
            parser: "postcss-less",
            syntax: "postcss-less",
            ident: "postcss",
            plugins: loader => [
                require("postcss-import")({ root: loader.resourcePath }),
                require("autoprefixer")(),
                require("cssnano")(),
            ],
            },
        },
        {
            loader: "less-loader", // less -> css
            options: {
            javascriptEnabled: true, // 解决less混入
            },
        },
    }

配置typescript

npm

  • nrm ls
  • nrm use npm
  • npm login
  • npm publish