eslint: eslint语法检查js/jquery项目

小强有个dream

已于 2022-03-12 12:56:26 修改

阅读量430

点赞数

分类专栏： eslint webpack和vite 文章标签： javascript webpack jquery

于 2021-12-12 11:59:33 首次发布

本文链接：https://blog.csdn.net/qq_36413371/article/details/121885024

版权

eslint 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

webpack和vite

4 篇文章 1 订阅

订阅专栏

该博客介绍了如何结合Vite、ESLint和jQuery来搭建前端项目。配置中包括了ESLint的规则设置，Webpack的多入口配置，以及图片、CSS和JS的处理。项目还使用了html-webpack-plugin生成HTML，并在package.json中定义了相关的脚本。

摘要由CSDN通过智能技术生成

后续考虑用 vite+eslint+js/jquery 来一套
在这里插入图片描述

// .eslintrc.js
module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
    }
};

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
  devServer: {
    port: 7788, //控制端口
    open: true //是否自动打开默认浏览器
  },
  entry: {
    item: './src/index',
    // item1: './src/item1',
    // item2: './src/item2',
    // item3: './src/item3',
    // item4: './src/item4',
    // item5: './src/item5',
    // item6: './src/item6',
    // item7: './src/item7'
    // jquery: './public/assets/vendors/jquery/jquery.min.js'
  },
  output: {
    path: path.join(__dirname, './dist'),
    filename: '[name].bundle.js' //多入口写法--打包出同名文件
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 打包输出HTML
      filename: 'index.html',
      template: './src/index.html'
    }),
    // new HtmlWebpackPlugin({
    //   // 打包输出HTML
    //   filename: 'item1.html',
    //   template: './src/item1.html'
    // }),
    // new HtmlWebpackPlugin({
    //   // 打包输出HTML
    //   filename: 'item2.html',
    //   template: './src/item2.html'
    // }),
    // new HtmlWebpackPlugin({
    //   // 打包输出HTML
    //   filename: 'item3.html',
    //   template: './src/item3.html'
    // }),
    // new HtmlWebpackPlugin({
    //   // 打包输出HTML
    //   filename: 'item4.html',
    //   template: './src/item4.html'
    // }),
    // new HtmlWebpackPlugin({
    //   // 打包输出HTML
    //   filename: 'item5.html',
    //   template: './src/item5.html'
    // }),
    // new HtmlWebpackPlugin({
    //   // 打包输出HTML
    //   filename: 'item6.html',
    //   template: './src/item6.html'
    // }),
    // new HtmlWebpackPlugin({
    //   // 打包输出HTML
    //   filename: 'item7.html',
    //   template: './src/item7.html'
    // })
  ],
  // ??? rules在module下
  module: {
    rules: [
      {
        // 处理css文件
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        // 处理图片
        test: /\.(png|jpg|gif|eot|svg|ttf|woff|mp4)$/,
        use: 'url-loader?limit-400000'
      },
      {
        // 处理.html结尾文件
        test: /\.html$/,
        use: { loader: 'html-loader' }
      },
      {
        // 处理js
        test: /\.js$/,
        use: 'babel-loader'
      }
    ]
  }
}

/ package.json
{
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "eslint": "eslint ./node_modules/eslint/bin/eslint.js ./src/js/*.js",
    "build": "webpack",
    "dev": "webpack-dev-server"
  }
  "eslintIgnore": [
    "/src/lib/"
  ],
}