app-form-view 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-form-view",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "vue表单组件库",
   "main": "dist/index.js",
   "publishConfig": {
@@ -24,6 +24,7 @@
   "license": "ISC",
   "devDependencies": {
     "@babel/core": "^7.20.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/preset-env": "^7.20.2",
     "@rollup/plugin-alias": "^4.0.2",
     "@rollup/plugin-babel": "^6.0.3",
@@ -35,20 +36,21 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
     "@vue/babel-plugin-transform-vue-jsx": "^1.4.0",
-    "autoprefixer": "^10.4.13",
+    "autoprefixer": "^10.5.0",
     "body-parser": "^1.20.2",
     "express": "^4.18.2",
     "glob": "^8.1.0",
     "http-proxy-middleware": "^3.0.5",
     "node-sass": "^6.0.1",
+    "postcss": "^8.5.15",
     "rollup": "^2.79.1",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-filesize": "^9.1.2",
     "rollup-plugin-livereload": "^2.0.5",
-    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-scss": "^4.0.1",
     "rollup-plugin-serve": "^2.0.2",
     "rollup-plugin-vue2": "^0.8.1",
-    "sass": "^1.100.0",
+    "sass": "^1.101.0",
     "sass-loader": "^7.0.3",
     "uglify-es": "^3.3.9",
     "vuepress": "^1.9.8",
@@ -62,7 +64,7 @@
     "js-beautify": "^1.15.4",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",
-    "rollup-plugin-scss": "^4.0.1",
+    "rollup-plugin-postcss": "^4.0.2",
     "vant": "^2.12.14",
     "vue": "^2.6.14",
     "vue-template-compiler": "^2.6.14",

package/scripts/rollup.config.base.js

@@ -3,81 +3,113 @@ import resolve from "@rollup/plugin-node-resolve"
 import commonjs from "@rollup/plugin-commonjs"
 import copy from 'rollup-plugin-copy';
 import json from '@rollup/plugin-json'
-import scss from "rollup-plugin-scss"
 import alias from '@rollup/plugin-alias'
 import vue from 'rollup-plugin-vue2'
 import image from '@rollup/plugin-image'
 import replace from '@rollup/plugin-replace'
+// 新增postcss，移除scss导入
+import postcss from "rollup-plugin-postcss"
 const path = require('path')
 
 const customResolver = resolve({
   extensions: ['.mjs', '.js', '.jsx', '.json', '.sass', '.scss']
 });
 
-export default {
-  input: "src/index.js",
-  //external: ['vue'],
-  plugins: [
-    alias({
-      entries: [
-        { find: '@', replacement: path.resolve(__dirname, '../src') },
-      ],
-      customResolver
-    }),
-    replace({
-      // 关键：必须用 JSON.stringify 包裹，且值为 process.env.NODE_ENV（从命令行传递）
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
-      preventAssignment: true,
-    }),
-    vue({
-      // 解析 template 模板
-      template: {
-        compiler: require('vue-template-compiler'), // 显式指定编译器
-        compilerOptions: {
-          preserveWhitespace: false
-        }
-      },
-      //css: true, // 👈 改成 true
-      // 处理样式（交给 postcss）
-      css: false
-    }),
-    scss({
-      fileName: "css/style.css",
-      failOnError: true,
-      sourceMap: false,
-    }),
-    resolve({
-      extensions: ['.js', '.vue', '.json'],
-      preferBuiltins: false
-    }),
-    commonjs({
-      include: "node_modules/**",
-    }),
-    babel({
-      exclude: 'node_modules/**',
-      extensions: ['.js', '.vue', '.jsx'], // 明确支持的文件类型
-      babelHelpers: 'bundled',
-      presets: [
-        ['@babel/preset-env', {
-          targets: 'last 2 versions, > 1%, not dead'
-        }]
-      ],
-      plugins: [
-        '@babel/plugin-syntax-jsx',
-        '@vue/babel-plugin-transform-vue-jsx'
-      ]
-    }),
-    json(),
-    image(),
-    copy({
-      targets: [
-        {
-          src: 'node_modules/element-ui/lib/theme-chalk/fonts/*', // 源文件路径（Element UI 的字体文件）
-          dest: 'dist/fonts' // 目标路径（复制到 dist/fonts 目录下）
-        }
-      ],
-      // 可选：如果目标目录已存在，覆盖旧文件
-      overwrite: true
-    })
-  ]
-};
+/**
+ * 工厂生成基础配置
+ * @param {string} cssOutputName css输出完整路径/文件名
+ * @returns Rollup基础配置
+ */
+function createBaseConfig(cssOutputName = "form-design.css") {
+  return {
+    input: "src/index.js",
+    external: ['vue', 'vuex', 'element-ui', 'vant'],
+    output: {
+      globals: {
+        vue: 'Vue',
+        vuex: 'Vuex',
+        'element-ui': 'ELEMENT',
+        vant: 'vant'
+      }
+    },
+    plugins: [
+      alias({
+        entries: [
+          { find: '@', replacement: path.resolve(__dirname, '../src') },
+        ],
+        customResolver
+      }),
+      replace({
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+        preventAssignment: true,
+      }),
+      vue({
+        template: {
+          compiler: require('vue-template-compiler'),
+          compilerOptions: {
+            preserveWhitespace: false
+          }
+        },
+        css: false,
+        scoped: true
+      }),
+      // 替换原来的 scss 插件
+      postcss({
+        extract: cssOutputName,
+        use: ["sass"], // 解析 lang="scss"
+        plugins: [
+          require("autoprefixer")()
+        ],
+        sourceMap: false
+      }),
+      resolve({
+        extensions: ['.js', '.vue', '.json'],
+        preferBuiltins: false
+      }),
+      commonjs({
+        include: "node_modules/**",
+      }),
+      babel({
+        exclude: 'node_modules/**',
+        extensions: ['.js', '.vue', '.jsx'],
+        babelHelpers: 'bundled',
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              targets: {
+                ie: 11,
+                chrome: 49,
+                safari: 10
+              },
+              modules: false,
+              useBuiltIns: false
+            }
+          ]
+        ],
+        plugins: [
+          '@babel/plugin-syntax-jsx',
+          '@vue/babel-plugin-transform-vue-jsx',
+          '@babel/plugin-proposal-optional-chaining'
+        ]
+      }),
+      json(),
+      image(),
+      copy({
+        targets: [
+          {
+            src: 'node_modules/element-ui/lib/theme-chalk/fonts/*',
+            dest: 'dist/fonts'
+          }
+        ],
+        overwrite: true
+      })
+    ],
+    onwarn(warning, warn) {
+      if (warning.code === 'CIRCULAR_DEPENDENCY') return
+      if (warning.message.includes('stream')) return
+      warn(warning)
+    }
+  }
+}
+export default createBaseConfig;

package/scripts/rollup.config.build.js

@@ -1,54 +1,57 @@
-
-import replace from '@rollup/plugin-replace';
 import path from "path";
 const glob = require("glob")
 const list = {};
-async function makeList(dirpath, list) {
+
+function makeList(dirpath, list) {
   const files = glob.sync(dirpath + '/**/app-index.js')
   for (let file of files) {
     const component = 'index'
     list[component] = file
   }
-
 }
 makeList('src', list)
+
 import filesize from "rollup-plugin-filesize";
 import terser from '@rollup/plugin-terser';
-import baseConfig from "./rollup.config.base.js";
+import createBaseConfig from "./rollup.config.base.js";
 import { name, version } from "../package.json";
-// banner
+
 const banner =
-  `${"/*!\n" + " * "}${name}.js v${version}\n` +
-  " * Released under the MIT License.\n" +
-  " */";
-const external = ['vue', 'element-ui', 'util', 'vant', 'vuex'];
+  `/*!
+ * ${name}.js v${version}
+ * Released under the MIT License.
+ */`;
+
+const external = ['vue', 'element-ui', 'vant', 'vuex'];
 const globals = {
   'vuex': 'Vuex',
   'vue': 'Vue',
   'vant': 'vant',
-  'element-ui': 'ELEMENT',
-  'util': 'util'
+  'element-ui': 'ELEMENT'
 };
-// 支持输出 []
-baseConfig.input = list
+
+// 调用工厂函数，指定css输出路径，不要手动改base原始对象
+const baseConfig = createBaseConfig("css/style.css");
+baseConfig.input = 'src/app-index.js'
+
 export default [
-  // .js, .cjs.js, .esm.js
   {
     ...baseConfig,
     external,
-    output: [
-      // umd development version with sourcemap
-      {
-        dir: `dist`,
-        name,
-        banner,
-        assetFileNames: 'style.css',
-        format: 'umd',
-        globals
-      },
-
+    output: {
+      file: "dist/index.js",
+      banner,
+      format: 'umd',
+      globals,
+      name: "AppFormView",
+    },
+    // 重点：删掉外层的 scss 实例，只追加压缩插件
+    plugins: [
+      ...baseConfig.plugins,
+      terser({
+        format: { comments: 'all' }
+      }),
+      filesize()
     ],
-    plugins: [...baseConfig.plugins, terser(), filesize()],
   }
-];
-
+];

package/scripts/rollup.config.dev.js

@@ -1,32 +1,29 @@
 import livereload from "rollup-plugin-livereload";
-import baseConfig from "./rollup.config.base.js";
+import createBaseConfig from "./rollup.config.base.js";
 import { name } from "../package.json";
 import express from 'express';
 import { createProxyMiddleware } from 'http-proxy-middleware';
-import replace from '@rollup/plugin-replace';
 const glob = require("glob");
 const list = {};
 
-// 修复1：正确提取组件路径+修复模板字符串语法错误
-async function makeList(dirpath, list) {
+// 移除无用 async
+function makeList(dirpath, list) {
   const files = glob.sync(dirpath + '/**/index.js');
   for (let file of files) {
-    // 提取组件路径（如 src/components/button/index.js → button）
     const component = file.split(/[/.]/).slice(-3, -1).join('/');
-    list[component] = file; // 移除多余的 ${}，避免字符串拼接错误
+    list[component] = file;
   }
 }
 makeList('src/components/', list);
 
-// 启动 Express 服务器
+// 启动 Express 开发服务
 const app = express();
-const localIP = 'localhost'; // 固定本地IP（已替换）
-const proxyTarget = `http://${localIP}:8088`; // 代理目标IP
+const localIP = 'localhost';
+const proxyTarget = `http://${localIP}:8082`;
 
-// 静态文件服务
 app.use(express.static('.'));
 
-// 代理中间件（目标已改为固定IP）
+// API 代理
 app.use('/api', createProxyMiddleware({
   target: proxyTarget,
   changeOrigin: true,
@@ -39,15 +36,17 @@ app.use('/api', createProxyMiddleware({
   }
 }));
 
-// 修复2：控制台日志显示正确的IP地址（而非localhost）
 app.listen(8006, localIP, () => {
-  console.log(`🚀 开发服务器已启动: http://${localIP}:8006`); // 显示IP访问地址
-  console.log(`🔀 代理配置: /api/* -> ${proxyTarget}/api/*`); // 显示正确代理目标
+  console.log(`🚀 开发服务器已启动: http://${localIP}:8006`);
+  console.log(`🔀 代理配置: /api/* -> ${proxyTarget}/api/*`);
 });
 
+// 1. 通过工厂生成全新独立配置，指定开发环境CSS输出路径
+const devBase = createBaseConfig();
+
 export default [
   {
-    ...baseConfig,
+    ...devBase,
     output: [
       {
         file: `dist/${name}.js`,
@@ -56,15 +55,13 @@ export default [
       },
     ],
     plugins: [
-      ...baseConfig.plugins,
-      replace({  // 新增插件
-        __API_PROXY_TARGET__: JSON.stringify(proxyTarget),
-        preventAssignment: true
-      }),
+      ...devBase.plugins,
+      // 删除外层 scss、删除外层重复 replace！base 已内置
+      // 仅追加开发专属热更新插件
       livereload({
         watch: '.',
         port: 35729,
-        host: localIP // 修复3：livereload绑定本地IP，避免局域网热更新失效
+        host: localIP
       })
     ],
   },

package/scripts/rollup.config.prod.js

@@ -3,7 +3,7 @@ import terser from "@rollup/plugin-terser";
 import baseConfig from "./rollup.config.base.js";
 import { name as packageName, version } from "../package.json";
 import path from "path";
-
+import scss from "rollup-plugin-scss"
 // banner 保持不变
 const banner =
   `${"/*!\n" + " * "}${packageName}.js v${version}\n` +
@@ -62,12 +62,17 @@ function generateRollupConfigs() {
           globals
         }
       ],
-      plugins: [...baseConfig.plugins, filesize()]
+      plugins: [...baseConfig.plugins, scss({
+        fileName: "form-design.css",
+        failOnError: true,
+        //sourceMap: false,
+      }), filesize()]
     });
 
     // --- 压缩版配置（.min.js）---
     configs.push({
       ...baseConfig,
+
       input: entryPath, // 动态设置入口文件
       external,
       output: [
@@ -81,6 +86,11 @@ function generateRollupConfigs() {
       ],
       plugins: [
         ...baseConfig.plugins,
+        scss({
+          fileName: "form-design.css",
+          failOnError: true,
+          //sourceMap: false,
+        }),
         terser({
           compress: {
             drop_console: false,

package/src/app-index.js

@@ -1,65 +1,82 @@
 import Vue from 'vue'
 import '@/assets/scss/app-form.scss'
-// 只导入自己的组件
 import viewAppForm from '@/views/build/viewAppForm.vue'
+// 全部导入改名
+import _AppForm from '@/components/appForm/Form.vue'
+import _AppFormItem from '@/components/appForm/Formitem.vue'
+import _AppSubRow from '@/components/appForm/SubRow.vue'
+import _AppInput from '@/components/appForm/Input.vue'
+import _AppTextBox from '@/components/appForm/TextBox.vue'
+import _AppInputHidden from '@/components/appForm/InputHidden.vue'
+import _AppSelect from '@/components/appForm/Select.vue'
+import _AppRadio from '@/components/appForm/Radio.vue'
+import _AppCheckbox from '@/components/appForm/Checkbox.vue'
+import _AppDateTimePicker from '@/components/appForm/DateTimePicker.vue'
+import _AppDateTimeRange from '@/components/appForm/DateTimePickers.vue'
+import _AppInputTree from '@/components/appForm/inputTree.vue'
+import _AppInputUpload from '@/components/appForm/InputUpload.vue'
+import _AppSearchSelect from '@/components/appForm/SearchSelect.vue'
+import _AppSearchApi from '@/components/appForm/SearchApi.vue'
+import _AppSubTitle from '@/components/appForm/SubTitle.vue'
+import _AppTable from '@/components/appForm/Table.vue'
+import _AppButton from '@/components/appForm/Button.vue'
+import _AppLayoutBlock from './components/appForm/LayoutBlock.vue'
 
-// 内部子组件 —— 只供 viewAppForm 内部使用，不对外！
-import AppForm from '@/components/appForm/Form.vue'
-import AppFormItem from '@/components/appForm/Formitem.vue'
-import AppSubRow from '@/components/appForm/SubRow.vue'
-import AppInput from '@/components/appForm/Input.vue'
-import AppTextBox from '@/components/appForm/TextBox.vue'
-import AppInputHidden from '@/components/appForm/InputHidden.vue'
-import AppSelect from '@/components/appForm/Select.vue'
-import AppRadio from '@/components/appForm/Radio.vue'
-import AppCheckbox from '@/components/appForm/Checkbox.vue'
-import AppDateTimePicker from '@/components/appForm/DateTimePicker.vue'
-import AppDateTimeRange from '@/components/appForm/DateTimePickers.vue'
-import AppInputTree from '@/components/appForm/inputTree.vue'
-import AppInputUpload from '@/components/appForm/InputUpload.vue'
-import AppSearchSelect from '@/components/appForm/SearchSelect.vue'
-import AppSearchApi from '@/components/appForm/SearchApi.vue'
-import AppSubTitle from '@/components/appForm/SubTitle.vue'
-import AppTable from '@/components/appForm/Table.vue'
-import AppButton from '@/components/appForm/Button.vue'
-import AppLayoutBlock from './components/appForm/LayoutBlock.vue'
-
-// 内部组件列表
-const innerComponents = [
-    AppForm,
-    AppFormItem,
-    AppSubRow,
-    AppInput,
-    AppTextBox,
-    AppInputHidden,
-    AppSelect,
-    AppRadio,
-    AppCheckbox,
-    AppDateTimePicker,
-    AppDateTimeRange,
-    AppInputTree,
-    AppInputUpload,
-    AppSearchSelect,
-    AppSearchApi,
-    AppSubTitle,
-    AppTable,
-    AppButton,
-    AppLayoutBlock
-]
+const components = {
+    AppFormView: viewAppForm,
+    AppForm: _AppForm,
+    AppFormItem: _AppFormItem,
+    AppSubRow: _AppSubRow,
+    AppInput: _AppInput,
+    AppTextBox: _AppTextBox,
+    AppInputHidden: _AppInputHidden,
+    AppSelect: _AppSelect,
+    AppRadio: _AppRadio,
+    AppCheckbox: _AppCheckbox,
+    AppDateTimePicker: _AppDateTimePicker,
+    AppDateTimeRange: _AppDateTimeRange,
+    AppInputTree: _AppInputTree,
+    AppInputUpload: _AppInputUpload,
+    AppSearchSelect: _AppSearchSelect,
+    AppSearchApi: _AppSearchApi,
+    AppSubTitle: _AppSubTitle,
+    AppTable: _AppTable,
+    AppButton: _AppButton,
+    AppLayoutBlock: _AppLayoutBlock
+}
 
-// 安装插件：只对外暴露 viewAppForm
 const install = function (Vue) {
     if (install.installed) return
-
-    // 1. 注册内部子组件（给 viewAppForm 使用）
-    innerComponents.forEach(comp => {
+    install.installed = true
+    Object.values(components).forEach(comp => {
         Vue.component(comp.name, comp)
     })
+}
 
-    // 2. 只对外导出这一个主组件
-    Vue.component(viewAppForm.name, viewAppForm)
+const AppFormPlugin = {
+    install,
+    ...components
 }
+export default AppFormPlugin
 
-export default {
-    install
-}
+// 现在导出变量名和导入别名不冲突，正常编译
+export const AppFormView = components.AppFormView
+export const AppForm = components.AppForm
+export const AppFormItem = components.AppFormItem
+export const AppSubRow = components.AppSubRow
+export const AppInput = components.AppInput
+export const AppTextBox = components.AppTextBox
+export const AppInputHidden = components.AppInputHidden
+export const AppSelect = components.AppSelect
+export const AppRadio = components.AppRadio
+export const AppCheckbox = components.AppCheckbox
+export const AppDateTimePicker = components.AppDateTimePicker
+export const AppDateTimeRange = components.AppDateTimeRange
+export const AppInputTree = components.AppInputTree
+export const AppInputUpload = components.AppInputUpload
+export const AppSearchSelect = components.AppSearchSelect
+export const AppSearchApi = components.AppSearchApi
+export const AppSubTitle = components.AppSubTitle
+export const AppTable = components.AppTable
+export const AppButton = components.AppButton
+export const AppLayoutBlock = components.AppLayoutBlock