zoukankan      html  css  js  c++  java
  • 05js语法检查、js兼容性处理

    js语法检查

    js语法检查插件:eslint-loader eslint
    js语法规则插件:eslint-config-airbnb-base eslint-plugin-import

    1. 安装eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import
      npm install eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D
    2. 在webpack.config.js中引用配置rules规则
    {
        /**
         * 语法检查:eslint-loader eslint
         *     注意:只检查自己写的源代码,第三方的库是不用检查的
         *     设置检查规则:
         *      package.json中eslintConfig中设置~
         *      "eslintConfig": {
                    "extends": "airbnb-base"
                }
         *      airbnb --> eslint-config-airbnb-base eslint-plugin-import eslint
         */
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
            // 自动修复eslint的错误
            fix: true
        }
    }
    

    3.在package.json中配置引用的规则插件:airbnb-base

    "eslintConfig": {
       "extends": "airbnb-base"
    }
    

    js兼容性处理

    • js简单兼容性处理插件:babel-loader @babel/core @babel/preset-env
    • 全部兼容性处理:@babel/polyfill
    • 需要做兼容性处理的就按需加载:core-js
    1. js简单兼容性处理
    • 安装插件:babel-loader @babel/core @babel/preset-env
      npm install babel-loader @babel/core @babel/preset-env -D
    • 在webpack.config.js中的rules配置如下:
    {
    	test: /.js$/,
    	exclude: /node_modules/,
    	loader: 'babel-loader',
    	options: {
    	    //1. 指示babel做怎么样的兼容性处理
    	    presets: ['@babel/preset-env']	
    	}
    }
    
    1. 全部兼容性处理
    • 安装插件:@babel/polyfill
      npm install @babel/polyfill -D
    • 在需要处理的js中加载该插件:@babel/polyfill
      import '@babel/polyfill';
    1. 需要做兼容性处理的就按需加载 core-js
    • 安装插件:core-js
      npm install core-jsl -D
    • 在webpack.config.js的rules中配置相应的参数:
    {
    	test: /.js$/,
    	exclude: /node_modules/,
    	loader: 'babel-loader',
    	options: {
    	    //1. 指示babel做怎么样的兼容性处理
    	    //presets: ['@babel/preset-env']
    	
    	    //2. 预设:指示babel做怎么样的兼容性处理
    	    presets: [
    	        [
    	            '@babel/preset-env',
    	            {
    	                // 按需加载
    	                useBuiltIns: 'usage',
    	                // 指定core-js版本
    	                corejs: {
    	                    version: 3
    	                },
    	                // 指定兼容性做到哪个版本浏览器
    	                targets: {
    	                    chrome: '70',
    	                    firefox: '63',
    	                    ie: '9',
    	                    safari: '12',
    	                    edge: '19'
    	                }
    	            }
    	        ]
    	    ]
    	}
    }
    

    注意:第2和第3不能同时使用

  • 相关阅读:
    计算机相关单位换算关系的积累
    谈编程资料
    杂记toCSV
    [转载]Windows 8][Metro Style Apps]淺談Metro Style Apps的瀏覽模式及螢幕解析度
    [转载][Windows 8][Metro Style Apps]Windows 8 開發/執行環境概觀
    【转载】[Windows 8]Hello Windows 8 Windows 8 Developer Preview搶先預覽
    台湾dotnet程序员之家
    [转载]实现Application Tile 更新
    [转载]在.NET中实现OAuth身份认证
    杂记
  • 原文地址:https://www.cnblogs.com/lhongsen/p/13311263.html
Copyright © 2011-2022 走看看