5

08335 / hivui-platform-template

hivui平台项目模板

Browse code 5 master
1 parent 86ea193 commit 88e3e36b9b97c053b411dde606ebf3fa23109e89 caibinghong authored on 28 Dec 2021

Showing 2 changed files

Ignore Space Show notes View build/doc.txt 0 → 100644
node webpack 多config 编译执行 https://cloud.tencent.com/developer/section/1477277 parallel-webpack 多config 并行执行编译，这样提高速度 192.168.4.194 项目文件：/filesdisk2/eap5/web/workspace/project/deploy /filesdisk2/eap5/studio/workspace/project/deploy/ 192.168.4.193 项目文件： /opt/eap5/desktop/preview/ deploy最终的项目部署目录 http://192.168.4.194:3000/project/01521/mokuai/shitu/abc/dtv/1.0.0/index.html 让npm run dev在Linux后台持久运行 nohup npm run dev >/dev/null 2>&1 & exit 杀端口进程 netstat -apn\|grep 3000 kill -9 18164 下面几个版本组合（有些版本没有列出来）。 npm install -g node-gyp https://github.com/webpack-contrib/sass-loader/blob/v6.0.7/package.json node-sass 对环境的要求 Node 12 的话要 node-sass 4.12+ 然页sass-loader 版本8的，配对 node-sass版本4 npm i sass-loader@8.0.2 node-sass@4.13.0 -D npm rebuild node-sass npm i less@4.1.1 less-loader@3.0.0 -D npm cache clean -f rimraf node_modules npm shrinkwrap // npm-shrinkwrap.json 锁定包版本环境 1：npm install webpack -g 2: npm install webpack-cli -g 3: npm init -y 4: npm install webpack --save-dev 5: npm install html-webpack-plugin （html编译插件） 6：npm install clean-webpack-plugin 6.1: npm install webpack-dev-server (服务插件) 6.2: npm install style-loader css-loader （css打包插件） 6.3: npm install file-loader url-loader (文件图片打包插件) 6.4: npm install less-loader (less打包插件) 6.5: npm install sass scss --save-dev （sass scss打包插件） 6.6: npm install sass-loader nade-sass (sass打包插件) 7新建一个src文件夹和 less文件夹和webpack.config.js //以element 方式打包各各组件，做为按需导出使用 ElementUI/babel-plugin-component .babelrc "plugins": ["transform-vue-jsx", "transform-runtime", [ "component", { "libraryName": "hi-ui", "style":false } ]], vue2 使用 vite 所需求的步骤： 1、相关包安装 npm i '@vitejs/plugin-vue' '@vue/compiler-sfc' vite vite-plugin-vue2 -D 2、添加vite.confing.js import { createVuePlugin } from "vite-plugin-vue2"; 在配置项中，转vue plugins: [createVuePlugin()], 3、修改vite/dist/client/client.js case 'error': //判断当前出错的页面 let locPath = location.pathname.split('/'); locPath.pop(); if(err.id.indexOf(locPath.join('/'))==-1)break; case 'update': return;//让用户手动去刷新 08335 case 'full-reload': return;//让用户手动去刷新 08335 报类似这样的错误： Current process list running is not in sync with saved list. App BookStack differs. Type ‘pm2 save’ to synchronize. 按先后顺序，执行如下操作： pm2 update pm2 save pm2 list npm i vite@2.3.7 --save-dev //fonticon这个版本才可以有图标显示 webpack5 https://blog.csdn.net/j178202798/category_11141799.html npm run build:debug ./project/zhuomianduanyanshi/biaozhundanju/view/biaodan/dtv/1.0.0 webpack 2 vite https://github.com/tnfe/wp2vite/blob/master/README.zh-CN.md 自动化构建工具（三）Parcel https://blog.csdn.net/weixin_42580704/article/details/108378689 https://www.parceljs.cn/getting_started.html

Ignore Space Show notes View

build/doc.txt 0 → 100644

node webpack 多config 编译执行
https://cloud.tencent.com/developer/section/1477277
parallel-webpack 多config 并行执行编译，这样提高速度

192.168.4.194
项目文件：/filesdisk2/eap5/web/workspace/project/deploy
        /filesdisk2/eap5/studio/workspace/project/deploy/
        
192.168.4.193
项目文件：
/opt/eap5/desktop/preview/

deploy最终的项目部署目录
http://192.168.4.194:3000/project/01521/mokuai/shitu/abc/dtv/1.0.0/index.html

让npm run dev在Linux后台 持久运行
nohup npm run dev >/dev/null 2>&1 &
exit
杀端口进程
netstat -apn|grep 3000
kill -9 18164

下面几个版本组合（有些版本没有列出来）。

npm install -g node-gyp
https://github.com/webpack-contrib/sass-loader/blob/v6.0.7/package.json

node-sass 对环境的要求 Node 12 的话要 node-sass 4.12+
然页sass-loader 版本8的， 配对 node-sass版本4 
npm i sass-loader@8.0.2 node-sass@4.13.0 -D

npm rebuild node-sass

npm i less@4.1.1 less-loader@3.0.0 -D
npm cache clean -f

rimraf node_modules
npm shrinkwrap  // npm-shrinkwrap.json 锁定包版本环境

1：npm install webpack -g

2: npm install webpack-cli -g

3: npm init -y

4: npm install webpack --save-dev

5: npm install html-webpack-plugin    （html编译插件）

6：npm install clean-webpack-plugin

6.1: npm install webpack-dev-server   (服务插件)

6.2: npm install style-loader css-loader  （css打包插件）

6.3: npm install file-loader url-loader    (文件图片打包插件)

6.4: npm install less-loader    (less打包插件)

6.5: npm install sass scss --save-dev       （sass scss打包插件）

6.6: npm install sass-loader nade-sass      (sass打包插件)

7新建一个src文件夹  和  less文件夹       和webpack.config.js

//以element 方式打包各各组件，做为按需导出使用 ElementUI/babel-plugin-component
.babelrc
"plugins": ["transform-vue-jsx", "transform-runtime", [
    "component",
    {
        "libraryName": "hi-ui",
        "style":false
    }
]],

vue2 使用 vite 所需求的步骤：

1、相关包安装
npm i '@vitejs/plugin-vue' '@vue/compiler-sfc' vite vite-plugin-vue2 -D

2、添加vite.confing.js
import { createVuePlugin } from "vite-plugin-vue2";
在配置项中，转vue
plugins: [createVuePlugin()],

3、修改vite/dist/client/client.js

case 'error': 
    //判断当前出错的页面
    let locPath = location.pathname.split('/');
    locPath.pop();            
    if(err.id.indexOf(locPath.join('/'))==-1)break;

case 'update': 
        return;//让用户手动去刷新 08335
    case 'full-reload':
        return;//让用户手动去刷新 08335

报类似这样的错误： Current process list running is not in sync with saved list. App BookStack differs. Type ‘pm2 save’ to synchronize.

按先后顺序，执行如下操作：

pm2 update
pm2 save
pm2 list

npm i vite@2.3.7 --save-dev //fonticon这个版本才可以有图标显示
webpack5
https://blog.csdn.net/j178202798/category_11141799.html

npm run build:debug ./project/zhuomianduanyanshi/biaozhundanju/view/biaodan/dtv/1.0.0

webpack 2 vite
 https://github.com/tnfe/wp2vite/blob/master/README.zh-CN.md

自动化构建工具（三）Parcel
 https://blog.csdn.net/weixin_42580704/article/details/108378689
 https://www.parceljs.cn/getting_started.html

Ignore Space Show notes View build/webpack.prod.conf.js
// 多进程编译所有 //parallel-webpack允许您并行运行多个Webpack构建,从而将工作分散到各个处理器上,从而有助于显着加快构建速度 let argvs = (process.argv[2] \|\| "").replace(/\s$/g, "") var run = require('parallel-webpack').run, configPath = require.resolve('./webpack.get-list.js'), options = { watch: false, maxRetries: 1, stats: false, // defaults to false maxConcurrentWorkers: 5,// use 2 workers argv: [argvs] }; function notify(res) { //多打包时，如果其中一个模块出错，不知道是哪个模块 console.log('\n--------编译完成------- \n'); } let moduleList = argvs!=""?argvs.split(','):[]; let len = moduleList.length; if (len == 0) { moduleList = require('./webpack.get-module').moduleList \|\| []; console.log('=========进入全模块编译状态...=============') console.log('=========共有'+moduleList.length+'模块=============') run(configPath, options, notify); } else { let webpack = require('webpack') let webpackList = require('./webpack.get-list.js'); console.log('=========指定模块编译状态...==============') console.log('=========共有'+len+'模块=============') webpack(webpackList[0], (err, stats) => { //这个回调一定要写，不然打包不出来 if (err \|\| stats.hasErrors()) {//编译错误不在 err 对象内，而是需要使用 stats.hasErrors() 单独处理 const info = stats.toJson(); // console.error(info.errors); for (let i = 0, l = info.errors.length; i < l; i++) { // console.log(chalk.red(info.errors[i].message)); // console.error(info.errors[i].message) console.error(info.errors[i]) } } // 处理完成 }) } // 多进程编译所有 //parallel-webpack允许您并行运行多个Webpack构建,从而将工作分散到各个处理器上,从而有助于显着加快构建速度 let argvs = (process.argv[2] \|\| "").replace(/\s$/g, "") var run = require('parallel-webpack').run, configPath = require.resolve('./webpack.get-list.js'), options = { watch: false, maxRetries: 1, stats: false, // defaults to false maxConcurrentWorkers: 2,// use 2 workers argv: [argvs] }; function notify(res) { //多打包时，如果其中一个模块出错，不知道是哪个模块 console.log('\n--------编译完成------- \n'); } let moduleList = argvs!=""?argvs.split(','):[]; let len = moduleList.length; if (len == 0) { moduleList = require('./webpack.get-module').moduleList \|\| []; console.log('=========进入全模块编译状态...=============') console.log('=========共有'+moduleList.length+'模块=============') run(configPath, options, notify); } else { let webpack = require('webpack') let webpackList = require('./webpack.get-list.js'); console.log('=========指定模块编译状态...==============') console.log('=========共有'+len+'模块=============') webpack(webpackList[0], (err, stats) => { //这个回调一定要写，不然打包不出来 if (err \|\| stats.hasErrors()) {//编译错误不在 err 对象内，而是需要使用 stats.hasErrors() 单独处理 const info = stats.toJson(); // console.error(info.errors); for (let i = 0, l = info.errors.length; i < l; i++) { // console.log(chalk.red(info.errors[i].message)); // console.error(info.errors[i].message) console.error(info.errors[i]) } } // 处理完成 }) }

Ignore Space Show notes View

build/webpack.prod.conf.js

// 多进程 编译所有
//parallel-webpack允许您并行运行多个Webpack构建,从而将工作分散到各个处理器上,从而有助于显着加快构建速度
let argvs = (process.argv[2] || "").replace(/\s*$/g, "")
var run = require('parallel-webpack').run,
  configPath = require.resolve('./webpack.get-list.js'),
  options = {
    watch: false,
    maxRetries: 1,
    stats: false, // defaults to false
    maxConcurrentWorkers: 5,// use 2 workers
    argv: [argvs]
  };

Show line notes below