文章目录
基于nodejs开发的一款代码压缩(注释,空格等)混淆工具, 处理浏览器对js/css的兼容性, 性能优化
babel
: 语法降级,兼容老浏览器uglifyjs
: 减小代码体积(去除空格,换行等)- 处理路径问题,node_modules模块引入的本地化(浏览器无该目录)!
npm install -D webpack webpack-cli webpack-dev-server css-loader style-loader less-loader url-loader babel-loader
pack
npm run webpack serve
: 自动打包
默认会在项目的根目录下生成一个bundle.js,对应于内存中的. 故index.html应该配置此处的入口文件webpack serve
: 打包时就不需要dist目录了,打包的文件被都放在内存中.
css-loader/style-loader
: 打包处理css
/less
文件. 默认webpack只能处理基本的js文件
config
const path = require('path')
module.exports = {
mode: 'development', // 默认|production; dev模式下不会对代码进行压缩和性能优化(方便调试,否则代码都压缩了,不过调试时代码还是有点偏差=A)!
devtool: 'eval-source-map', // 解决A,使报错行数与源码一致; 发布时:'nosources-source-map':不暴露源代码(还是压缩后的),但能告知真实源代码错误的行数!
devServer: {
open: true, // 打包完自动打开浏览器
host: '127xxx',
port: 80
}
entry: path.join(__dirname, './src/index.js'), // 打包入口文件路径. __dirname:项目根目录!
output: {
path: path.join(__dirname, 'dist'), // 输出文件路径; 自动清理build输出目录?安装插件:'clean-webpack-plugin'
filename: 'js/bundle.js' // 输出文件名称
},
module: {
rules: [
{ test: /\.jpg|png|gif|webp$/, use: 'url-loader?limit=5120&outputPath=images' }, // 图片<=5120B时就会被转成base64;也可展开为对象形式:-->
{
test: /\.jpg|png|gif|webp$/,
use: {
loader: 'url-loader',
options: {
limit: 5120,
outputPath: 'images'
}
}
}
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 注意:有顺序的!先交给最右边的去处理!
{ test: /\.less$/, use: ['style-loader','css-loader', 'less-loader'] },
{
test: /\.js$/, exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: ['@babel/plugin-proposal-class-properties'] // 此插件用来转换js中的高级语法(如静态成员方法)
}
}
}
]
},
resolve: {
alias: {
'@': path.join(__dirname, './src/') // 告诉webpack,代码中的@表示src顶层目录
}
}
}
yarn
由Facebook+Google联合推出的新的js包管理器. 为了弥补npm的一些缺陷.
优点: 速度快(并行安装) + 输出更简洁
wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo
yum -y install yarn # or
npm install -g yarn;
yarn init # 初始化生成package.json文件
yarn [install] # 根据package.json+yarn.lock(锁定的版本号)安装依赖;
yarn [global] add/remove vite jquery bootstrap --dev|-D # 自动安装最新的版本,会覆盖旧的
yarn upgrade --latest jquery
yarn run
yarn create vite my-vue app --template vue # 创建vite脚手架.目前很少使用
npm
Node Package Manager
基于NodeJS的javascript包管理器
https://nodejs.org/en/download/
vim /etc/profile
#export NODE_HOME=/usr/local/node
#export PATH=$PATH:$NODE_HOME/bin
npm update -g typescript;
# PowerShell: set-ExecutionPolicy RemoteSigned
npm init
npm cache clean # 清除以前安装的node_modules
npm install/update/search xx@latest --force # 根据package.json安装依赖; 也可以输入github地址! --force:强制重新安装
npm install @types/jquery -D # 为jQuery添加声明文件
npm run # 执行package.json里面的脚本
npm list -g # 查看所有全局安装的模块
# https://vitejs.dev/
npm install vite -g
npm install less sass -D
package.json
{
"type": "module", // 默认node使用CommonJS规范而不是ES6(此处激活ES6)
"scripts": {
"serve": "vue-cli-service serve" // npm run serve 来执行,下同
"dev": "vite", // 若启用了webpack-dev-server,可写为"webpack serve"
"pro": "webpack --mode production", // 对应于 .env.production
"build": "vite build --mode sit" // 对应于 .env.sit or .env.sit.local
}
}
tsconfig.js
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom", "esnext"
],
"allowJs": true, // 允许编译js
"skipLibCheck": true, // 跳过所有声明文件的检查
"strict": true, // 严格类型检查
"declaration": true, // 生成相应的.d.ts文件
"types": [ // 限制代码中import的types,避免污染全局定义
"jQuery"
],
"exclude": [ // 不进行类型检查
"node_modules", "build"
],
"paths": {
"@services": [
"services/*" // import {XxService} from '@services/XxService'
]
}
}
}
vite.config.js
import eslintPlugin from 'vite-plugin-eslint'
eslintPlugin({
include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
})
.eslintrc.js
https://segmentfault.com/a/1190000041954694
https://blog.csdn.net/qq_42345108/article/details/124386056
yarn add--dev/-D eslint eslint-config-prettier eslint-plugin-prettier #[eslint-plugin-vue @vue/eslint-config-standard eslint-config-prettier]
#[yarn run/npx] eslint --init
#"lint": "eslint \"src/**/*.{js,jsx,vue,ts,tsx}\" --fix" // yarn [run] lint
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'@vue/standard',
'prettier'
],
overrides: [
],
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: '@typescript-eslint/parser'
},
plugins: [
'vue',
'@typescript-eslint'
],
rules: {
// 当前webpack的打包模式若时生产模式且有log则警告
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
// 若生产模式下有debugger指令则报警
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'vue/multi-word-component-names': 'off',
}
}
babel
- https://cli.vuejs.org/core-plugins/babel.html
npm install -D @vue/cli-plugin-babel
babel.config.js
- 语法降级
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
"componnent",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
}