fis3 中如何引入mint-ui

发布于 2022-09-07 20:54:49 字数 6306 浏览 33 评论 0

我构建工具使用的是fis3,使用了fis.hook('node_modules')。可直接在页面import NPm包，但是CSS样式却没有引入进来，求大神帮忙分析一下。
我看报错，在打包VuE文件的时候
Can't resolve mint-ui/packages/cell/style.css in file [/node_modules/mint-ui/lib/mint-ui.common.js]
不能把style部分打包js.

问题出现的环境背景及自己尝试过哪些方法

现在我解决的方法是手动在需要的页面引入mint-ui的CSS 这只是一个没办法的办法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
// 服务器接收文件配置

var RECEIVER = 'http://115.182.215.48/receive...';

// 测试环境目标地址

var TARGET_PATH = '/home/work/spw/app/cx-vrm-h5/fe-test-qa/webroot';

// 两种配置模式
var deployConfig = {

// 调试测试环境配置，debug，该模式下不进行打包压缩
"debug": {
    qa: ""
}

};

var namespace = "";

// // 项目名称
// fis.set('namespace', "groupon");

// 支持vue的单文件组件编译
fis.set( 'project.fileType.text', 'vue' );

// 忽略编译文件
fis.set( 'project.ignore', [

'/node_modules/**',
'.DS_store',
'npm-debug.log',
'package.json',
'**.md',
'/test/**',
'karma.conf.js',
'/coverage/**',
'fis-conf.js'

] );

fis.match( '::package', {

postpackager: fis.plugin( 'loader', {
    ignore: [ 'common/static/js/mod/mod.js' ],
    allInOne: true, // 合并页面下的js、css
    sourceMap: true, //是否生成依赖map文件
    useInlineMap: true, //是否将sourcemap作为内嵌脚本输出
} )

} );

/ 语言解析及编译 /
// fis-parser-less
fis.match( '*.less', {

parser: fis.plugin( 'less' ),
rExt: '.css'

} );

// Vue编译
fis.match( '**.vue', {

rExt: '.js',
isMod: true,
useSameNameRequire: true,
parser: fis.plugin( 'vue-component', {
    cssScopeFlag: 'vuec'
} )

} );

// 丑化压缩，babel编译，向下兼容，支持vue编译
fis.match( '{.js,.vue:js}', {

isMod: true,
optimizer: fis.plugin( 'uglify-js' ),
parser: [
    fis.plugin( 'babel-5.x' ),
    fis.plugin( 'translate-es3ify', null, 'append' )
]

} );

// less编译
// .vue文件，less解析
// 自动补全兼容前缀
fis.match( '{.less,.vue:less}', {

rExt: 'css',
parser: [ fis.plugin( 'less-2.x' ) ],
postprocessor: fis.plugin( 'autoprefixer', {
    "browsers": [ 'Firefox >= 20', 'Safari >= 6', 'IOS >= 6', 'Chrome >= 12', "Android >= 2.2" ]
} )

} );

// CSS压缩
fis.match( '**.{css,less}', {

optimizer: fis.plugin( 'clean-css' )

} );

// 图片压缩
fis.match( '*.{png,jpg}', {

optimizer: fis.plugin( 'png-compressor' )

} );

// csssprites
fis.match( '::package', {

spriter: fis.plugin( 'csssprites' )

} );

// 同名依赖
fis.match( '**', {

useSameNameRequire: true

} );

// fis3 已经默认不自带模块化开发支持，commonjs 规范作为模块化开发，配合 mod.js 一起使用。
// 参考https://github.com/fex-team/f...
fis.hook( 'commonjs', {

extList: ['.js', '.jsx', '.es', '.ts', '.tsx','.vue'],
paths: {
    // vue的npm.main指向的是运行时版本
    // 这里通过别名指向Vue的完整压缩版本
    Vue: './node_modules/vue/dist/vue.js',
    'mint-ui':'./node_modules/mint-ui',
    
    JsBarcode: './node_modules/jsbarcode/dist/JsBarcode.all.js',
},

packages: [ {
        name: 'lib',
        location: './src/lib'
    },
    {
        name: 'pages',
        location: './client/pages'
    },
    {
        name: 'common',
        location: './common'
    },
    {
        name: 'root',
        location: './'
    },
    {
        name: 'js',
        location: './common/static/js'
    }, {
        name: 'ui',
        location: './common/widget/ui'
    }
]

} );
fis.match('/{node_modules}/**.js', {

isMod: true,
useSameNameRequire: true

});

//禁用fis components
fis.unhook('components')
fis.hook('node_modules')

/ 目录规范及发布配置 **/
// // 调试配置
for ( var i in deployConfig.debug ) {

fis.media( i )
    .match( '**.html', {
        useHash: false,
        release: namespace + '$0',
        deploy: [ fis.plugin( 'skip-packed' ),
            fis.plugin( 'http-push', {
                receiver: RECEIVER,
                to: TARGET_PATH + deployConfig.debug[ i ]
            } )
        ]
    } )
    // 所有js, css 加 hash
    .match( '**.{js,css,less,vue}', {
        isMod: true,
        useHash: true,
        optimizer: null,
        release: namespace + '/static/$0', // 所有资源发布时产出到 /static 目录下
        deploy: [ fis.plugin( 'http-push', {
                receiver: RECEIVER,
                to: TARGET_PATH + deployConfig.debug[ i ]
            } ),
            // 注释掉对打包过的文件进行跳过
            // fis.plugin('skip-packed')
        ]
    } )
    .match( 'common/static/js/mod/mod.js', {
        isMod: false,
        parser: null
    } )
    // 所有字体
    .match( 'common/static/fonts/*', {
        useHash: true,
        release: namespace + '/static/$0', // 所有资源发布时产出到 /static 目录下
        deploy: [ fis.plugin( 'skip-packed' ),
            fis.plugin( 'http-push', {
                receiver: RECEIVER,
                to: TARGET_PATH + deployConfig.debug[ i ]
            } )
        ]
    } )
    // 所有图片
    .match( '**.{png,jpg,gif}', {
        useHash: true,
        release: namespace + '/static/images/$0', // 所有资源发布时产出到 /static 目录下
        useSprite: false,
        deploy: [ fis.plugin( 'skip-packed' ),
            fis.plugin( 'http-push', {
                receiver: RECEIVER,
                to: TARGET_PATH + deployConfig.debug[ i ]
            } )
        ]
    } )

}