webpack4基本打包(二)----babel配置打包方法,兼容较低版本IE9+

注意:(vue中的几个文件的理解)

  1、.postcssrc.js  

       众所周知为兼容所有浏览器,有的CSS属性需要对不同的浏览器加上前缀,然而有时添加一条属性,需要添加3~4条类似的   属性只是为了满足浏览器的兼容,这不仅会增加许多的工作量,还会使得你的思路被打断。  如何解决这个问题? 处理CSS前       缀问题的神器——AutoPrefixer。

     Autoprefixer是一个后处理程序,你可以同Sass,Stylus或LESS等预处理器共通使用。它适用于普通的CSS,而你无需关心要 为哪些浏览器加前缀,只需全新关注于实现,并使用W3C最新的规范。

2、.eslintrc.js

   eslint是用来管理和检测js代码风格的工具,可以和编辑器搭配使用,如vscode的eslint插件 当有不符合配置文件内容的代码出现就会报错或者警告

3、.babelrc

 这个文件是用来设置转码的规则和插件的


首先配置本地babel环境

1.安装babel-core

npm install babel-core@6.22.1 -D

2.根目录创建.babelrc文件,这个文件的作用是在linux中rc文件是自动执行文件

3.安装babel-cli,安装这个脚手架的作用是可以使用babel命令

npm install babel-cli -g

4.下面这些放devDependencies里头

   "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-jest": "^21.0.2",
    "babel-loader": "^7.1.1",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",

5.在根目录新建.babelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

6.就可以在控制台使用babel-cli中的babel命令尝试在本地转换文件,babel src/main.js,就可以在控台看到你转换效果。

可以看到的是,需要兼容ie8以上,就是把const 都转化成var了!

image.png


相关内容

发表评论

验证码:
点击我更换图片

最新评论