模块使用

vue模块

import paasui from 'paas-paasui/ui';
import Form from 'modulesv/form';
import FormCard from 'modulesv/formcard';
import CrmFormCard from 'modulesv/crmformcard';
import FormItem from 'modulesv/form/formItem';
import Fields from 'modulesv/fields';
import Calendar from 'modulesv/calendar';
import Slide from 'modulesv/slide';
import Dialog from 'modulesv/dialog';
import Poplayer from 'modulesv/poplayer';
import Wrapper from 'modulesv/wrapper';
import Actions from 'modulesv/actions';
import ActionCard from 'modulesv/actioncard';
import Cascader from 'modulesv/cascader';
import Button from 'modulesv/button';
import queueSelector from'./queueSelector';
import formLayout from'./queueSelector/formLayout.js';
require.async('./assets/style/all.css');
const components = {
    paasui,
    formLayout,
    install() {
        _.each([
            Form,
            FormItem,
            Button,
            Calendar,
            Slide,
            Dialog,
            Poplayer,
            Wrapper,
            Actions,
            ActionCard,
            FormCard,
            Cascader,
            CrmFormCard,
            queueSelector], (component) => {
            Vue.component(component.name, component);
        });
        _.each(Fields, (component, name) => {
            Vue.component(name, component);
        });
    }
};

window.PaasVUI = components;

export default components;

使用

 Vue.use(PaasVUI);

webpack关于模块npm的导出

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const CmdPlugin = require('./plugin');
const RuntimePublicPathPlugin = require("webpack-runtime-public-path-plugin");
function getStaticDomain(env = 'dev') {
    return  {
        'dev': 'https://ceshi112.fspage.com/',
        'build': 'https://a9.fspage.com/'
    }[env]
}
const cssLoadCfg = [
    {
        loader: 'style-loader'
    },
    {
        loader: 'css-loader',
        options:{
            url:false
        }
    },
]

module.exports = function(env = 'dev'){
    let domain = env
    if('ceshi112' === env){
        env = 'build'
        domain = 'dev'
    };

    let mode = 'development';
    if (env === 'build') {
        mode = 'production';
    }
    return {
        mode,
        context: process.cwd(),
        entry: {
            vui: './src/modulesv/vui.js',
            lib: './src/lib.js'
        },
        output: {
            path: path.resolve(process.cwd(), env),
            chunkFilename: "paasui-chunk-[chunkhash].js",
            publicPath:getStaticDomain(domain),
            libraryTarget:  'umd',
            libraryExport:  'default',
            library:         'PaasUi',
            umdNamedDefine:  true
        },
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    use: [
                        {
                            loader: 'vue-loader'
                        }
                    ]
                },
                {
                    test: /\.js$/,
                    use: [
                        {
                            loader:'babel-loader'
                        },
                        {
                            loader: './loader.js',
                            options:{
                                seajsModules:['base-modules','base-moment','paas-paasui','paas-paasui-modules','vue-selector-input','vue-selector-input-v2','crm-modules', 'crm-widget'],
                                seajsFiles:['./src/modulesv/vui.js']
                            }
                        }
                    ]
                },{
                    test: /\.css$/,
                    use: cssLoadCfg
                }, {
                    test: /\.scss$/,
                    use: cssLoadCfg.concat({
                        loader:'sass-loader'
                    })
                }

            ]
        },
        resolve: {
            alias: {
                'modulesv': path.resolve(__dirname, 'src/modulesv')
            },
            extensions: ['.vue', '.js']
        },
        optimization: {
            minimize: false,
            // minimizer: [ new UglifyJsPlugin()]
        },

        externals: {},
        plugins: [
            new VueLoaderPlugin(),
            new CmdPlugin({
                entryOnly: true
            }),
            new RuntimePublicPathPlugin({
                runtimePublicPath: "FS.ROOT_PATH + '/paas/paasui/'"
            }),
        ]
    };
}

主要是

  output: {
            path: path.resolve(process.cwd(), env),
            chunkFilename: "paasui-chunk-[chunkhash].js",
            publicPath:getStaticDomain(domain),
            libraryTarget:  'umd',
            libraryExport:  'default',
            library:         'PaasUi',
            umdNamedDefine:  true
        },

使用

            require.async('paas-paasui/lib',(lib)=>{
              lib.getModule('freeWorkflow').then((freeWorkflow) => {
                me.freeWorkflowTable = freeWorkflow.default.render({
                    el: document.getElementsByClassName('free-table-content')[0],
                });
              })
            })

参考 books.sangniao.com/manual/1800…