1. 前端模块化

    前端为什么会需要模块化？
    20220304162128891.png
    前端模块化的演变：

    • 全局函数==污染全局命名空间
    • 命名空间NameSpace==内部状态可以被外部状态改写
    • 匿名函数自调用==闭包不太容易理解，模块之间存在依赖不好处理
    • 文件模块化（commonJS、AMD、UMD文件模块化规范）
    1. webpack打包js为umd模块
    • 编写打包组件库需要的配置文件
    • webpack是打包工具
    • webpack配置文件只能处理JS和JSON文件，其他文件需要配置loader帮助webpack处理，另外webpack不能处理css文件（比如vue文件，需要安装vue-loader，导入webpack配置文件并配置对应属性，如下）
      1. plugins: [
      2.       new VueLoaderPlugin(),
      3.   ],
      4.   module: {
      5.       rules: [
      6.           {
      7.               test: /\.vue$/,//vue文件使用什么样得loader
      8.               use: [{
      9.                   loader: 'vue-loader'
      10.               }]
      11.           }
      12.       ]
      13.   }
      webpack完整配置： ```javascript const { VueLoaderPlugin } = require(‘vue-loader’); const path = require(‘path’); //nodejs自带 const glob = require(‘glob’); //nodejs自带 const list = {}; /* list数据格式 { card:”./components/lib/card/index.js”, demo:”./components/lib/demo/index.js” } **/

    async function makeList(dirPath, list) { const files = glob.sync(${dirPath}/**/index.js); console.log(‘files’, files);//files [ ‘components/lib/card/index.js’, ‘components/lib/demo/index.js’ ] files.forEach((item) => { const component = item.split(/[/.]/)[2]; console.log(‘component’, component);//component card component demo

    1. list[component] = `./${item}`;

    }); }

    makeList(‘components/lib’, list);

    module.exports = { entry: list,//入口文件 mode: ‘development’, output: { filename: ‘[name].umd.js’, path: path.resolve(__dirname, ‘dist’),//使用绝对路径 library: “yui”, libraryTarget: “umd”, }, plugins: [ new VueLoaderPlugin(), ], module: { rules: [ { test: /.vue$/,//vue文件使用什么样得loader use: [{ loader: ‘vue-loader’ }] } ] } }

    1. webpack打包JS执行命令,在package.js中进行配置
    2. ```javascript
    3. webpack --config ./webpack.component.js

    20220304172019238.png

    1. Glup打包css

    在根目录下创建gulpfile.js文件，将js文件中引用的gulp、gulp-sass、gulp-minify-css、sass进行npm安装
    20220309155227928.png

    1. const gulp = require('gulp');
    2. const sass = require('gulp-sass')(require('sass'))//sass->css
    3. const minifyCSS = require('gulp-minify-css');//css压缩
    4. gulp.task('sass', async function () {
    5.   return gulp.src('components/**/*.scss')//获取SCSS文件
    6.     .pipe(sass())//转换成CSS
    7.     .pipe(minifyCSS())//压缩CSS
    8.     .pipe(gulp.dest('dist/css'));//输出目录
    9. });

    gulp打包css执行命令,在package.js中进行配置

    1. npx gulp sass

    20220304172235590.png

    配置打包JS和css指令

    1. npm run build:js && npm run build:css

    20220304172248757.png