生产环境处理js

最新推荐文章于 2024-05-02 00:30:00 发布

原创最新推荐文章于 2024-05-02 00:30:00 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

webpack工程化专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何使用eslint和babel进行JavaScript代码的质量检查和兼容性处理，包括设置eslint的airbnb-base规则，启用自动修复功能，以及配置babel进行按需加载的兼容性处理。此外，还探讨了如何通过修改mode为production实现JS代码的自动压缩，确保生产环境的性能优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要安装:

npm install --save-dev eslint-loader eslint eslint-config-airbnb-base babel-loader @babel/core @babel/preset-env @babel/polyfill core-js

eslint检查(生产环境简洁版)

// 配置rules
// 该检查需要设置enforce为pre, 即先于所有js的rule最先执行
// 因为后面兼容性处理如果先执行了,更改后的代码可能不通过检查
// 并且如果检查都不通过就不需要js的其他处理了
{
  test: /\.js$/,
  // 优先执行, 在兼容性和压缩之前
  enforce: 'pre',
  // **不检查node_modules中的
  exclude: /node_modules/,
  // 使用eslint-loader检查js, 设置完了之后需要设置根据什么来检查js
  // 在package.json中配置
  loader: 'eslint-loader',
  options: {
  // 检查的问题自动修复
    fix: true
  }
}

// package.json
// eslint-loader基于什么规则来检查js
"eslintConfig": {
  // 继承自aitbnb-base规则来检查
  "extends": "airbnb-base",
  "env": {
    "browser": true
  }
}

兼容性处理

 // 兼容性处理
  {
    test: /\.js$/,
    // 使用babel处理兼容性问题, babel-loader用于解析
    // 规则是core.js, 插件为preset-env
    // **不检查这里
    exclude: /node_modules/,
    loader: 'babel-loader',
    // 记住上面需要使用babel-loader即可
    // 下面的options中的写法基本是固定但是
    options: {
      // 预设, 配置babel做什么样的兼容性处理
      presets: [
        // 这里还需要一层中括号
        [
          '@babel/preset-env',
          {
            // 按需加载
            useBuiltIns: 'usage',
            // 指定core.js版本
            corejs: {
              version: 3
            },
            // 兼容性做到哪个版本的浏览器
            targets: {
              chrome: '60',
              firefox: '60',
              ie: '9',
              safari: '10',
              edge: '17'
            }
          }
        ]
      ]
    }
  }

js压缩

// mode改成production则自动压缩js代码
  mode: 'development'

关于js的处理不要引入什么, 就按照上面配置rules即可