Webpack

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顶层目录
    }
  }
}

  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脚手架.目前很少使用

  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

{
  "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
  }
}

{
  "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'
      ]
    }
  }
}

import eslintPlugin from 'vite-plugin-eslint'
eslintPlugin({
  include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
})

  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',
  }
}

module.exports = {
presets: [
  '@vue/cli-plugin-babel/preset'
],
plugins: [
  "componnent",
  {
    "libraryName": "element-ui",
    "styleLibraryName": "theme-chalk"
  }
]
}