脚手架/组件库(1)

自定义脚手架

webpack，项目结构，组件流程，按需加载实现

目录

自定义脚手架

一、基本目录结构

二、流程

1.webpack.conf.js

2.组件

3.包构建

4.其他项目引入使用

总结

---

项目创建

生成package.json：

npm init

webpack添加：webpack 是打包工具，它会根据代码的内容(js,css,图片及其他资源)解析模块依赖，帮助我们把多个模块的代码打包。

1. webpack （.vue等其他文件需要loader解析成webpack可以打包的资源）
2. webpack-cli  为webpack的依赖，4.X版本以后需要手动安装
3. 添加webpack入口配置文件 webpack.conf.js

npm install --save-dev webpack webpack-cli
{
  "scripts": {
    "build": "webpack --config ./build/webpack.conf.js",
  },
}

一、基本目录结构

不同webpack配置对应produce,dev环境

二、流程

1.webpack.conf.js

入口/src/index.js=》引入Button及其他组件=》loader处理=》输出output/.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
  mode: 'production',
  entry: {
    app: path.resolve(process.cwd(), './src/index.js'),
  },
  output: {
    path: path.resolve(process.cwd(), './lib'),
    // publicPath: '/dist/',
    // filename: 'index.js',
    // chunkFilename: '[id].js',
    // libraryTarget: 'umd',
    // libraryExport: 'default',
    library: 'RICH',
    // umdNamedDefine: true,
    // globalObject: 'typeof self !== \'undefined\' ? self : this'
  },
  module: {
    rules: [
      {
        test: /\.(jsx?|babel|es6)$/,
        include: process.cwd(),
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            preserveWhitespace: false
          }
        }
      },//处理vue模板编译
      {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'less-loader'
        ],
      },//处理.vue(less/css) 依赖less-loader
     ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

处理资源	作用	依赖	备注
.js	打包资源模块	webpack，webpack-cli	webpack依赖webpack-cli
.vue	转换.vue文件	vue，vue-loader， vue-template-compiler
.less	转换.less文件	less，less-loader，css-loader	.vue文件中style会被当做.less文件处理
jsx?|babel|es6		babel-core，babel-loader，babel-preset-env

2.组件

将单个组件嵌套汇总到src/index中

/packages/card/index.js

import card from './src/main.vue';

// 1. 无install：页面中直接引入，可以使用该组件/main.js引用，页面中无法使用
// 2. 有install：main.js引入，会执行install方法，可以将组件挂载在全局Vue,无需再其他页面引入
// 3. 有install：可以将插件挂载到全局Vue实例，包括directive，mixin

card.install = function (Vue, options) {
  Vue.component(card.name, card);
};
export default card;

/src.js

import button from '../packages/button/index';
import card from '../packages/card/index';

exports.button = button;
exports.card = card;

3.包构建

/package.json

"scripts": {
    "build": "webpack --config ./build/webpack.conf.js"
  },

输出文件(当前只全量打包出单文件)

4.其他项目引入使用

1.页面级别引入（main.js引入，组件必须有install方法，将组件注册到vue实例）

2.项目级别引入（.vue文件中引入，组件可以无install方法）

//1.默认到node_modules查找包
//2.自动通过包的pacake.json中main找到入口引入
import { card } from 'comui';
//1.执行组件中的install方法
//2.通过Vue.componet(name,name)将component注册到vue实例
Vue.use(card);

---

总结

基础组件库，无开发模式，无组件预览，全量加载js文件，无按需加载。