在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ fis3 中如何引入mint-ui

fis3 中如何引入mint-ui

我構(gòu)建工具使用的是fis3,使用了fis.hook('node_modules')??芍苯釉陧撁鎖mport NPm包,但是CSS樣式卻沒有引入進(jìn)來,求大神幫忙分析一下。
我看報(bào)錯(cuò),在打包VuE文件的時(shí)候
Can't resolve mint-ui/packages/cell/style.css in file [/node_modules/mint-ui/lib/mint-ui.common.js]
不能把style部分打包js.

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

現(xiàn)在我解決 的方法 是手動(dòng)在需要的頁面引入mint-ui的CSS 這只是一個(gè)沒辦法的辦法

相關(guān)代碼

// 請(qǐng)把代碼文本粘貼到下方(請(qǐng)勿用圖片代替代碼)
// 服務(wù)器接收文件配置

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

// 測(cè)試環(huán)境目標(biāo)地址

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

// 兩種配置模式
var deployConfig = {

// 調(diào)試測(cè)試環(huán)境配置,debug,該模式下不進(jìn)行打包壓縮
"debug": {
    qa: ""
}

};

var namespace = "";

// // 項(xiàng)目名稱
// 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作為內(nèi)嵌腳本輸出
} )

} );

/ 語言解析及編譯 /
// 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解析
// 自動(dòng)補(bǔ)全兼容前綴
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 已經(jīng)默認(rèn)不自帶模塊化開發(fā)支持,commonjs 規(guī)范作為模塊化開發(fā),配合 mod.js 一起使用。
// 參考https://github.com/fex-team/f...
fis.hook( 'commonjs', {

extList: ['.js', '.jsx', '.es', '.ts', '.tsx','.vue'],
paths: {
    // vue的npm.main指向的是運(yùn)行時(shí)版本
    // 這里通過別名指向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')

/ 目錄規(guī)范及發(fā)布配置 **/
// // 調(diào)試配置
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', // 所有資源發(fā)布時(shí)產(chǎn)出到 /static 目錄下
        deploy: [ fis.plugin( 'http-push', {
                receiver: RECEIVER,
                to: TARGET_PATH + deployConfig.debug[ i ]
            } ),
            // 注釋掉對(duì)打包過的文件進(jìn)行跳過
            // 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', // 所有資源發(fā)布時(shí)產(chǎn)出到 /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', // 所有資源發(fā)布時(shí)產(chǎn)出到 /static 目錄下
        useSprite: false,
        deploy: [ fis.plugin( 'skip-packed' ),
            fis.plugin( 'http-push', {
                receiver: RECEIVER,
                to: TARGET_PATH + deployConfig.debug[ i ]
            } )
        ]
    } )

}

你期待的結(jié)果是什么?實(shí)際看到的錯(cuò)誤信息又是什么?

如何在配置中,更改引入第三方的文件或者NPM呢 如mint-ui 等

回答
編輯回答
瞄小懶

使用fis3-hook 引入modules包,可以直接使用mint-ui ,由于fis3對(duì)一些NPM的兼容性不好,這里需要在index.html 單獨(dú)引入mint-ui 的樣式。

2018年6月23日 00:17