webpack 配置

2022-06-17

初始化项目

1	yarn init -y

添加 webpack-cli

1	yarn add webpack-cli -D

基础配置:(webpack.config.js)

let path = require('path');

module.exports = {
    mode: 'development', // 开发环境，生产环境 production
    entry: './src/index.js', // 入口文件
    output: {
        filename: 'bundle.js', // 输出文件名
        // filename: 'bundle.[hash].js', // 输出文件名，添加hash值
        // filename: 'bundle.[hash:10].js', // 输出文件名，添加10位hash值
        path: path.resolve(__dirname, 'build'), // 输出路径（绝对路径）
    }
}

打包命令：

// 可通过 --config 传入参数设置配置文件名称 默认（webpack.config.js）
npx webpack --config webpack.config.js

// 在 package.json 中 设置 scripts 脚本

"script": {
    "build": "webpack"
}

执行：
npm run build

webpack node方式启动项目

1	yarn add webpack-dev-server -D

配置文件添加配置：

devServer: {
	port: 3000,
	progress: true,
	contentBase: './build'
}

添加脚本

1
2
3

"script": {
    "dev": "webpack-dev-server "
}

安装 htmlWebpackPlugin 插件

将打包后的js,注入到 html 模板中

1	yarn add html-webpack-plugin -D

配置文件：

let htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    ...
    plugins: [
        new htmlWebpackPlugin({
            template: './src/index.html',// 模板的位置
            filename: 'index.html',// 打包后模板的名字
            minify: {
                removeAttributeQuotes: true,// 移出双引号
                collapseWhitespace:  true,// 压缩成一行
                hash: true,// 注入的js 文件名添加hash值
                
            }
        })
    ]
}

样式处理

引入适合的loader，在配置 loader 处理规则

css-loader 处理 @import 这种语法映入的样式

style-loader 把css 插入到 head 标签中

处理 less: less-loader

处理 sass: node-sass sass-loader

处理 stylus: stylus-loader

配置：

module.exports = {
    ...
    module: {
    	rules: [
    		// loader 使用时顺序从右-> 左, 从 下 -> 上
    		{
        		test: /\.css$/, 
        		use: [
        	       {
                        loader: 'style-loader',
                        options: {
                            // 设置插入到 标签顶部，这样自己在页面添加 style 标签优先级更高
                            insertAt: 'top'
                        }
                    }, 
                     'css-loader'
                  ]
			},
            {test: '/\.less$/',use: [
                {
                    loader: 'style-loader',
                     options: {
                        // 设置插入到 标签顶部，这样自己在页面添加 style 标签优先级更高
                        insertAt: 'top'
                    }
                },
                'css-loader',
                'less-loader' // 把 less -> css
            ]}
    	]
    }
}

样式抽离：mini-css-extract-plugin

为啥要用这个？

上述配置最终都是通过 style-loader 将样式转化为 style 标签插入到 head 标签中

而这个插件则是将 css 转化为 link 标签再插入 head 中、

它用于代替 style-loader。

1	yarn add mini-css-extract-plugin -D

let htmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExctractPlugin = require('mini-css-extract-plugin')
module.exports = {
    ...
    plugins: [
        new htmlWebpackPlugin({
            template: './src/index.html',// 模板的位置
            filename: 'index.html',// 打包后模板的名字
            minify: {
                removeAttributeQuotes: true,// 移出双引号
                collapseWhitespace:  true,// 压缩成一行
                hash: true,// 注入的js 文件名添加hash值
                
            }
        }),
        new MiniCssExctractPlugin({
           filename: 'main.css' 
        })
    ],
    module: {
    	rules: [
    		// loader 使用时顺序从右-> 左, 从 下 -> 上
    		{
        		test: /\.css$/, 
        		use: [
        	       MiniCssExctractPlugin.loader, // 将css 以link 标签形式插入 
                     'css-loader'
                  ]
			},
            {test: '/\.less$/',use: [
                MiniCssExctractPlugin.loader, // 将css 以link 标签形式插入,
                'css-loader',
                'less-loader' // 把 less -> css
            ]}
    	]
    }
}

给样式添加后缀：autoprefixer, postcss-loader

1	yarn add autoprefixer postcss-loader -D

let htmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExctractPlugin = require('mini-css-extract-plugin')
module.exports = {
    ...
    module: {
    	rules: [
    		// loader 使用时顺序从右-> 左, 从 下 -> 上
    		{
        		test: /\.css$/, 
        		use: [
        	       MiniCssExctractPlugin.loader, // 将css 以link 标签形式插入 
                     'css-loader',
                    'postcss-loader',
                  ]
			},
            {test: '/\.less$/',use: [
                MiniCssExctractPlugin.loader, // 将css 以link 标签形式插入,
                'css-loader',
                'postcss-loader',
                'less-loader' // 把 less -> css
            ]}
    	]
    }
}

还需要配置 postcss-loader 使用 autoprefixer 插件

根目录新增 postcss.config.js

1
2
3

module.exports = {
	plugins: [require('autoprefixer')]
}

css 压缩：optimize-css-assets-webpack-plugin

js 压缩：uglifyjs-webpack-plugin

1	yarn add optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D

let htmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExctractPlugin = require('mini-css-extract-plugin')
// 使用了css 压缩后，默认js压缩失效，需使用 插件压缩 js.
let OptimizeCss = require('optimize-css-assets-webpack-plugin')
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
    ...,
    optimization: {// 优化项
    	minimizer: [
    		new UglifyJsPlugin({
    			cache: true,
    			sourceMap: true,// 是否并发打包，压缩多个
    			paraller: true
            }),
    		new OptimizeCss()
        ]
    
    },
    module: {
    	rules: [
    		// loader 使用时顺序从右-> 左, 从 下 -> 上
    		{
        		test: /\.css$/, 
        		use: [
        	       MiniCssExctractPlugin.loader, // 将css 以link 标签形式插入 
                     'css-loader',
                    'postcss-loader',
                  ]
			},
            {test: '/\.less$/',use: [
                MiniCssExctractPlugin.loader, // 将css 以link 标签形式插入,
                'css-loader',
                'postcss-loader',
                'less-loader' // 把 less -> css
            ]}
    	]
    }
}

es高级语法降级处理

babel 三件套

babel-loader 转化源文件

@babel/core 核心模块有转化方法

@babel/preset-env 转化模块，es6->es5

@babel/plugin-proposal-class-properties 兼容es高级class语法

@babel/plugin-proposal-decorators 兼容装饰器语法

1	yarn add babel-loader @babel/core @babel/preset-env -D

let htmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExctractPlugin = require('mini-css-extract-plugin')

module.exports = {
    ...,
    module: {
    	rules: [
    	  {
    		test: '/\.js$/',
    		use: {
    		  loader: 'babel-loader',
    		  options: {
    			// 大插件集合，转换es6-> es5
    			presets: [
    			  '@babel/preset-env'
                ],
                // 小插件，转换 高级 es语法
                plugins: [
                     ["@babel/plugin-proposal-decorators", { "legacy": true }],
                    '@babel/plugin-proposal-class-properties',
                    "@babel/plugin-transform-runtime"
                ]
               }
            },
            // 只匹配 scr目录下js, 不包括 node_modules目录
            include: path.resolve(__dirname, 'src'),
            exclude: /node_modules/
          }
    		
    	]
    }
}

处理js语法及校验

生成器，promise 等一些内置方法，可能需要额外配置

@babel/plugin-transform-runtime

@babel-polyfill 兼容更高es语法,

1 2	// 生产开发都需要 yarn add @babel/plugin-transform-runtime @babel-polyfill

// "./app/js" 为js 入口
entry: ["@babel/polyfill", "./app/js"],module.exports = {
  entry: ["@babel/polyfill", "./app/js"],
};

js语法校验： eslint

官网可视化配置，配置完后可直接下载配置文件 .eslintrc.json

let htmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExctractPlugin = require('mini-css-extract-plugin')

module.exports = {
    ...,
    module: {
    	rules: [
    	  {
    		test: /\.js$/,
    		use: {
    			loader: 'eslint-loader',
    			options: {
                    enforce: 'pre', // 在从下往上执行规则中 先使用它，  post 后使用它
                }
            },
            
          },
    	  {
    		test: '/\.js$/',
    		use: {
    		  loader: 'babel-loader',
    		  options: {
    			// 大插件集合，转换es6-> es5
    			presets: [
    			  '@babel/preset-env'
                ],
                // 小插件，转换 高级 es语法
                plugins: [
                     ["@babel/plugin-proposal-decorators", { "legacy": true }],
                    '@babel/plugin-proposal-class-properties',
                    "@babel/plugin-transform-runtime"
                ]
               }
            },
            // 只匹配 scr目录下js, 不包括 node_modules目录
            include: path.resolve(__dirname, 'src'),
            exclude: /node_modules/
          }
    		
    	]
    }
}

引入全局变量

例如：将 jQuery 暴露到全局

在代码中通过内联loader 将 jQuery 以 $ 暴露到全局

1	import $ from 'expose-loader?$!jquery'

在配置项中引入，这样

module.exports = {
	...,
    module: {
        rules: [
		test: require.resolve('jquery'),
		use: 'expose-loader?$'
        ]
    }
}

// 使用,需要手动引入
import $ from 'jquery'

每个模块自动注入$

let webpack = require('webpack')
module.exports = {
	...,
	plugin:s: [
	  new webpack.ProvidePlugin({
	    $: 'jquery'
	  })
	]
}

还可以在index.html 模板用 script 标签引用 jquery CDN

通过MDN引入的依赖，需要设置不需要打包选项

通过 externals 使webpack 不处理某些依赖库

module.exports = {
	...,
	externals: {
		jquery: '$'
	}
}

图片处理

图片的引入方式

1、在 js 中创建图片引入

2、在css引入 background(‘url’)

3、

import url from './logo.png'
let image = new Image();

image.src = url

document.append(image)

使用 file-loader 处理

file-loader 默认在内部生成一张图片到 build 目录，把生成图片的名字返回来

background 中的图片路径 css-loader 回去处理

1	yarn add file-loader -D

module.exports = {
	...,
    module: {
        rules: [
		test: /\.(png|jpg|jpeg|gif)$/,
		use: 'file-loader'
        ]
    }
}

处理页面 img 标签中的图片 url

1	yarn add html-withimg-loader -D

module.exports = {
	...,
    module: {
        rules: [
		test: /\.html$/,
		use: 'html-withimg-loader'
        ]
    }
}

url-loader

url-loader 内部实现了 file-loader. 一般代替file-loader处理图片，将体积小的图片转成base64位，减少请求次数.

体积大的图片再用file-loader 处理

module.exports = {
	...,
    module: {
        rules: [
		test: /\.(png|jpg|jpeg|gif)$/,
		use: {
			loader: 'url-loader',
			options: {
				limit: 200*1024,// 小于200K 转 base64
				outputPath: 'img/', //将图片打包到 build/img 文件夹中
			}
		}
        ]
    }
}

打包文件分类

就是将打包的文件放置指定的文件，使打包文件具有层次

module.exports = {
    output: {
        filename: 'bundle.js', // 输出文件名
        // filename: 'bundle.[hash].js', // 输出文件名，添加hash值
        // filename: 'bundle.[hash:10].js', // 输出文件名，添加10位hash值
        path: path.resolve(__dirname, 'build'), // 输出路径（绝对路径）
        publicPath: './'
    }
	...,
    plugins: [
        new htmlWebpackPlugin({
            template: './src/index.html',// 模板的位置
            filename: 'index.html',// 打包后模板的名字
            minify: {
                removeAttributeQuotes: true,// 移出双引号
                collapseWhitespace:  true,// 压缩成一行
                hash: true,// 注入的js 文件名添加hash值
                
            }
        }),
        new MiniCssExctractPlugin({
           filename: '/css/main.css' 
        })
    ],
    module: {
        rules: [
		test: /\.(png|jpg|jpeg|gif)$/,
		use: {
			loader: 'url-loader',
			options: {
				limit: 200*1024,// 小于200K 转 base64
				outputPath: '/img/', //将图片打包到 build/img 文件夹中
            	 publicPath: 'www.xxx.com',// 给图片单独设置 publicPath
			}
		}
        ]
    }
}

多页应用打包

多入口，多出口. webpack 会打包多个入口js.

多个html 模板，需要借助 html-webpack-plugin 插件

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
	entry: {
        home: './src/index.js',
        other: './src/other.js'
    },
    output: {
        // [name] 代表 home,other
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    // 默认打包，home,other 都会在两个html中引入
    // 通过 chunks 设置只引入需要的入口js
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'home.html',
            chunks: ['home']
        }),
        new HtmlWebpackPlugin({
            template: './other.html',
            filename: 'other.html'
            chunks: ['other']
        })
    ]
}

配置 source-map

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    ...,
    // 源码映射 用于调试，打包后的js 被压缩处理，看不见源码
    // 增加映射文件，标识错误行列信息
    devtool: 'source-map',// 
    // 不会产生单独文件，但是可以显示错误行信息
    //devtool: 'eval-source-map',
    // 不会产生行列信息，但是是一个单独的映射文件
    //devtool: 'cheap-module-source-map',
    // 不会产生文件,集成在打包文件中，不会产生列信息,有行信息
    //devtool: 'cheap-module-eval-source-map' 

}

webpack 实时打包

代码修改已保存就更新页面

module.exports = {
    ...,
    watch: true,
    watchOptions: {
    	poll: 1000,// 每秒问我 1000次
    	aggreatementTimeout: 500 // 防抖，500毫秒内只打包一次
    	ignored: /node_modules/,// 不需要监控
    }
}

webpack 小插件

实用常用的插件

cleanWebpackPlugin

每次打包时清除上次的dist目录

1	yarn add clean-webpack-plugin -D

const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    ...,
    plugins: [
    	// 每次打包 清除 dist 文件夹
    	new CleanWebpackPlugin('./dist')
    ]
}

copyWebpackPlugin

可以将指定文件或文件夹复制到指定文件

1	yarn add copy-webpack-plugin -D

const copyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
    ...,
    plugins: [
    	// 每次打包 复制 文件/夹 到指定目录。可指定多个动作
    	new copyWebpackPlugin([
    		{
                from: './doc',
                to: './dist'
            }
        ])
    ]
}

bannerPlugin(wenpack内置)

const webpack = require('webpack')

module.exports = {
    ...,
    plugins: [
    	new webpack.bannerPlugin('make on 2022 by xxx')
    ]
}

webpack 跨域配置

前端开发测试时可配置 proxy 解决跨域问题

// 比如 页面服务是 localhost 8080, 接口服务localhost 3000
module.exports = {
    ...,
    devServer: {
    	//1、 如果后端是用express 写的，可以用中间件（webpack-dev-middleware）读取前端配置，实现前后端运行在一个端口	
    
    	before(app): {//2、 此处可模拟服务请求数据, [express 服务]
    		app.get('/user', (req, res)=> {
                res.json({name: 'xxx'})
            })
        },
    	//3、 把localhost:8080/api	开头的请求转发到 把localhost:3000
    	// localhost:8080/api/user -> localhost:3000/user
    	proxy: {
    		"/api": {
    			target: 'http://localhost:3000',
    			pathRewrite: {'/api', ''}
    		}
    	}
    }
}

resolve 解析

对第三方模块的优化处理

module.exports = {
    ...,
    resolve: { // 解析第三方模块 common
    	// 从当前路径查找依赖，不要去父级及其他路径去找了
    	module: [path.resolve('node_modules')],
        // 第三方模块的package.json 文件 main 字段 默认入口，可设置先找 style，没有在找 main
        mainFilds: ['style', 'main'],
        // 配置别名
        alias: {
            '@': path.resolve(__dirname, 'src')
        },
        // 省略后缀的处理, 先视为js 文件，没有就找 css 最后找 json 文件
        extensions: ['.js', '.css', '.json']
    }
}

注入环境变量区分开发环境

const webpack = require('webpack')
module.exports = {
    ...,
    plugins: [
    	new webpack.DefinedPlugin({
    		DEV: "'dev'"// JOSN.stringif('dev')
        })
    ]
}

访问： 
console.log(DEV)

优化项

noParse 不解析某些包

我们在 require 某个依赖时，webpack 默认会去解析这个依赖是否还依赖其他包，有的话就一起打包

noParse 则可设置不去检查这个依赖了

module.exports = {
    ...,
    module: {
    	noParse: /jquery/, // 不去解析 jQuery 依赖库
    }
}

排除，忽略某些文件

在进行某个规则可具体优化。

在引用momentjs 实践处理库时，moment 默认引入了所有语言包，导致文件打包很大，可以设置忽略语言包

// 设置语言包忽略后，如果要设置中文，需要手动引入中文包
import 'moment/local/zh-cn';
moment.locale('zh-cn')

module.exports = {
    ...,
    plugins: [
    	new webpack.IgnorePlugin(/\./locale//, /moment/)
    ],
    module: {
    	{
    		test: /\.js$/,
    		exclude: /node_modules/, // 排除
    		include: path.resolve('src'),// 只找 src 下js
    		use: ...
    	}
    }
}

动态链接库

开发中，有些不会变的模块可以提前打包成库，后边直接使用打包好的库。不需要每次都打包,下次打包体积就变小了

例如：react, react-dom 模块

新增打包配置文件 webpack-config.react.js

let path = require('path')
let webpack = require('webpack')
module.exports = {
	mode: 'devlopment',
    entry: {
        react: ['react', 'react-dom'],
    },
    output: {
        filename: '_dll_[name].js',
        path: path.resolve(__dirname, 'dist'),
        library: '_dll_[name]',// 打包后的模块名
        // libraryTarget: 'val' // commonj var this ..., 模块化模式 CMD，AMD，Commonjs
    },
    plugins: [
        new webpack.DLLPlugin({
            // name == library
            name: '_dll_[name]',
            // 清单, 模块名映射关系
            path: path.resolve(__dirname, 'dist', 'minifest.json')
        })
    ]
}

webpack.config.js 配置引用

let path = require('path')
let webpack = require('webpack')
module.exports = {
	...,
    plugins: [
        new webpack.DLLReferencePlugin({
            manifest: path.resolve(__dirname, 'dist', 'manifest.json')
        })
    ]
}

在index.html 中使用打包好的库

1	<script src="/_dll_react.js" ></script>

多线程打包进程

使用第三方模块 happypack, 项目体积大的时候会使打包速度变快

let path = require('path')
let HappyPack = require('happypack')
module.exports = {
	...,
    module: {
    	{
    		test: /\.js$/,
    		exclude: /node_modules/, // 排除
    		include: path.resolve('src'),// 只找 src 下js
    		use: 'HappyPack/loader?id=js'
    	},
        {
            test: /\.css$/, 
            use: 'HappyPck/loader?id=css'
        },
    }
    plugins: [
     new HappyPack({
         id: 'js',
         use: [
             {
               loader: 'babel-loader',
    		  options: {
    			presets: [
    			  '@babel/preset-env'
                ],
                plugins: [
                     ["@babel/plugin-proposal-decorators", { "legacy": true }],
                    '@babel/plugin-proposal-class-properties',
                    "@babel/plugin-transform-runtime"
                ]
             }
         ]
     }),
      new HappyPack({
         id: 'js',
         use: [
           {
                loader: 'style-loader',
                options: {
                    insertAt: 'top'
                }
            }, 
             'css-loader'
          ]
        ]
     }),
     
}

webpack 自带的优化

tree-shaking

生产环境下打包会去除没用的代码, 但只对 import 语法有效。通过 require 方式引入的模块不会优化

scope hosting

作用域提升

let a = 1;

let b = 2;

let c = 3;

let d = a + b + c;
console.log(d)


代码会被编译为：
console.log(6)

抽离公共代码

多入口环境下才能配置

页面都引用了 a/b.js. 所以缓存 a/b.js

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: 'production',
    optimization: {
      splitChunks: {// 分割代码块
          cacheGroups: {
              common: {// 符合条件抽离成公共模块
                  chunks: 'initial', // 入口处开始分析
                  minSize: 500*1024,// 体积大于500kb
                  minChunks: 2,// 至少引用了2次
              },
              // 抽离第三方模块为公共
              vendor: {
                  priorty: 1, // 权重，优先抽离公共模快
                  test: /node_modules/,// 抽离出来
                  chunks: 'initial', // 入口处开始分析
                  minSize: 500*1024,// 体积大于500kb
                  minChunks: 2,// 至少引用了2次
              }
          }
      }  
    },
	entry: {
        home: './src/index.js',
        other: './src/other.js'
    },
    output: {
        // [name] 代表 home,other
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    // 默认打包，home,other 都会在两个html中引入
    // 通过 chunks 设置只引入需要的入口js
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'home.html',
        }),
        new HtmlWebpackPlugin({
            template: './other.html',
            filename: 'other.html'
        })
    ]
}

webpack懒加载

es6 草案语法 , 不管是 vue,还是react 都是靠这个语法实现的懒加载

1	import('/xxx.js').then(data=> {})

webpack热更新

module.exports = {
    ...,
    devServer: {
    	port: 3000,
    	open: true,
    	contentBase: './dist',
    	hot: true, // 开启热更新
    },
    plugins: [
        // 可打印提示哪个模块更新了，
        new webpack.NameModulePlugin(),
        // 热更新插件
        new webpack.HotModuleReplacementPlugin()
    ]
}

监听data模块变化

import str from './data';

if(module.hot) {
    module.hot.accept('./data', ()=> {
        let str = require('./data');
        console.log(str)
    })
}

图片压缩方案

image-minimizer-webpack-plugin

vue-cli 项目中 vue.config.js

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

module.exports = {
  configureWebpack: {
    plugins: [
      new ImageMinimizerPlugin({
        minimizerOptions: {
          plugins: [
            ["gifsicle", { interlaced: true }],
            ["jpegtran", { progressive: true }],
            ["optipng", { optimizationLevel: 5 }],
            [
              "svgo",
              {
                plugins: [
                  {
                    removeViewBox: false
                  }
                ]
              }
            ]
          ]
        }
      })
    ]
  }
};

展开全文 >>

微信小程序拓展

2022-06-17

小程序框架

1：WeUI 小程序–使用教程

https://weui.io/

官方介绍：WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。小程序开发中最常用到的一款框架，受广大开发人员的欢迎。

[图片上传失败…(image-5dd2d3-1654073247786)]

2：美团小程序框架mpvue

Github：https://github.com/Meituan-Dianping/mpvue 官网： http://mpvue.com/

官方介绍：mpvue是一个使用 Vue.js开发小程序的前端框架。框架基于 Vue.js核心，mpvue修改了 Vue.js的 runtime和 compiler实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套Vue.js开发体验。

3：组件化开发框架wepy

Github地址: https://github.com/Tencent/wepy 官网地址： https://tencent.github.io/wepy

官方介绍：组件化开发，完美解决组件隔离，组件嵌套，组件通信等问题,支持使用第三方 npm 资源，自动处理 npm 资源之间的依赖关系，完美兼容所有无平台依赖的 npm 资源包.

[图片上传失败…(image-f7e73e-1654073247786)]

4：官方框架MINA

地址：https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html

官方介绍：框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。

5：Tina.js

一款轻巧的渐进式微信小程序框架

Tina.js 开源框架地址： https://github.com/tinajs/tina

官方介绍：是一款轻巧的渐进式微信小程序框架，保留 MINA (微信小程序官方框架) 的大部分 API 设计；无论你有无小程序开发经验，都可以轻松过渡上手。

6：前端框架weweb

地址: https://github.com/wdfe/weweb

官方介绍：weweb是一个兼容小程序语法的前端框架，你可以用小程序的写法，来写web应用。如果你已经有小程序了，通过它你可以将你的小程序运行在浏览器中。

7：微信UI组件库 iView Weapp

https://weapp.iviewui.com/

介绍：iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称，大幅度降低了学习成本，是一套一套高质量的微信小程序 UI 组件库。

8：ZanUI-WeApp –

一个颜值高、好用、易扩展的微信小程序 UI 库

https://cnodejs.org/topic/589d625a5c8036f7019e7a4a

官方介绍：ZanUI-WeApp结合了微信的视觉规范，为用户提供更加统一的使用感受。包含 badge、btn、等共计 17 类组件或元素。

9：uniApp

– 一个多端混合开发的好用的框架，熟悉一个适用性超强
框架地址： https://uniapp.dcloud.io/collocation/pages 文档地址： https://uniapp.dcloud.io/README 相适应的ide：Hbuilder 可以直接使用该ide打包相应所需的端代码官方介绍：开发一次，覆盖多端

小程序容器

所谓”小程序容器”，就是一个小程序的运行环境。 App 只要加载这个运行环境，就具备了运行小程序的能力。说得直白一点，它让你拥有了微信那样的小程序引擎，但是不必自己开发。

以前的方案是将小程序代码打包成适配各种平台的小程序运行环境。小程序容器则是可以适配各种小程序框架的代码，不需要额外打包成其他格式，直接运行

小程序容器 FinClip

FinClip 提供一套 SDK，不仅支持手机（iPhone、Android），还支持桌面（Windows、Linux、macOS）、手表、车机等各种平台。你的 App 只要加载了这套 SDK，就能直接运行微信小程序（以及小游戏），一行代码也不用修改。

也就是说，它完全支持微信小程序的 WXML 语法，无需二次开发，体验与微信端保持一致。你就可以把你的小程序，在微信运行一份，在自己的 App 也运行一份。

同时，它还支持 小程序一键转换成 App，可以将已有小程序代码导出为 IOS 与 Android 中可用的工程文件,并上架至各应用市场。由于导出的工程文件自动集成了 FinClip SDK ，所以直接拥有小程序的运行能力，后续可在这个 APP 上继续上架更多小程序，自建自己的小程序生态。

对于小型开发者，这个产品是免费使用，只有企业级应用才需要付费。