webpack配置 node_modules .vue 支持 es7 语法

怼烎@ 2022-12-30 10:53 72阅读 0赞

## 安装： ##

npm install -D babel-loader @babel/core @babel/preset-env webpack vue-loader

新版本 `babel-loader` 默认支持`es7`语法！  
如果需要给 `node_modules` 内的文件支持`es7` 则需要如下 `正确示范` 内配置  
如果只是单纯支持 `es7` 则不需要配置 `include`

## 正确示范： ##

// webpack.config.js:
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    module.exports = { 
       ...
       module: { 
        rules: [
          { 
            test: /\.m?js$/,
            include: [  // 设置包含的文件后 编译时 babel-loader 只用于编译包含内的文件
              path.resolve(__dirname,'./src'),
              path.resolve(__dirname,'./node_modules/@vendor/your-module')
            ],
            loader: 'babel-loader',  //默认支持 es7
            ...
          },
          { 
            test: /\.vue$/,
            loader: 'vue-loader'
          }
        ]
      },
      plugins: [
        new VueLoaderPlugin()  //使用 vue-loader 请确保在你的 webpack 配置中添加 Vue Loader 的插件
      ]
    }

## 错误示范： ##

// webpack.config.js:
    { 
       ...
       module: { 
        rules: [
          { 
            test: /\.m?js$/,
    		exclude: /node_modules/,      // 排除的文件 X
            include: [                    // 包含的文件
              path.resolve(__dirname,'./src'),
              path.resolve(__dirname,'./node_modules/@vendor/your-module')
            ],
            loader: 'babel-loader',       //默认支持 es7
            ...
          }
        ]
      }
    }

**原因：** 在 `include` 内添加文件表示只有该文件内编译才会使用该 loader  
所以使用 include 后根本没必要再写 `exclude: /node_modules/,` 而 `exclude`的处理权限高于 `include`, 所以当你使用 `include` 时还添加 `exclude: /node_modules/,` 则 `include` 就不生效了！

当写了 `include` 时， `exclude` 只能用来排除 `include` 内包含的文件:  
**写法如下：**

include: [
    	path.resolve(__dirname, "app")
    ],
    exclude: [
    	path.resolve(__dirname, "app/demo-files")
    ],