博客

webpack打包js为umd模块

1. 创建 webpack.config.js 文件
2. 需要安装 vue-loader，命令：
   
npm i vue-loader -D

3. 在 package.json 文件中写入打包命令，如图：
   

"build:js":"webpack --config ./webpack.config.js"

4. webpack.config.js 文件内容

const path=require('path');
const { VueLoaderPlugin} =require('vue-loader')

const glob =require('glob');
const list={}

// 一个个引入文件过于麻烦，因此采用下面的方式
// {
//     card:'./packages/Card/index.js'
//     demo:'./packages/Demo/index.js'
// }
async function makeList(dirPath,list){
    const files=glob.sync(`${dirPath}/**/index.js`)
    console.log('files:',files);
    for(let file of files){
        const component=file.split(/[/.]/)[2]
        console.log('component:',component);
        list[component]=`./${file}`
    }
    console.log(list);
}

makeList('packages',list)

module.exports={
    entry:list,
    mode:'development',
    output:{
        filename:'[name].umd.js',
        path:path.resolve(__dirname,'dist'),
        library:'mui',
        libraryTarget:'umd'
    },
    plugins:[
        new VueLoaderPlugin(),
    ],
    module:{
        rules:[
            {
                test:/\.vue$/,
                use:[
                    {
                        loader:'vue-loader',
                    }
                ]
            }
        ]
    }
}

5. 此时执行
   
   npm run build:js
   
   ，跑一下，看有问题没，有问题的话再进一步解决

gulp打包css文件

1. 新建文件 gulpfile.js ，并写入:

const gulp=require('gulp');
const sass=require('gulp-sass')(require('sass')) //sass -> css
const minifyCss=require('gulp-minify-css');

gulp.task('sass',async function(){
    return gulp.src('packages/css/**/*scss')
        .pipe(sass())
        .pipe(minifyCss())
        .pipe(gulp.dest('dist/css'));
})

2. 在 package.json 文件中写入打包命令，如图：
   
   
"build:css":"npx gulp sass"

   
   

3. 安装gulp、gulp-sass、gulp-minify-css：
   
   
npm i gulp gulp-sass gulp-minify-css -D

   
   再执行
   
npm run build:css

   看有没有问题

4. 在packages/css文件夹下 创建 index.scss文件，并写入

// 收回所有的样式代码
@import './Card.scss';
@import './Demo.scss';

再次执行

npm run build:css

看有没有问题

5. 在package.json文件中修改
   
"build": "npm run build:js && npm run build:css",

   ，此时运行
   
npm run build

   可进行两个打包。
   
   
6. 执行
   
npm run build

   ，看是否有问题
   
   （如果看着不明显的话，可以先将dist目录删除，再执行命令）

发布组件库到npm