webpack4知识整理（三）- 处理es6等

• 处理es6，转换为es5，首先需要安装一些loader

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

• 处理更高级的es7语法需要安装以下插件

npm install @babel/plugin-proposal-class-properties -D

• 在module的rules新增一个处理js的规则

     {
        test:/\.js$/,use:[
          {
            loader:'babel-loader',
            options:{
              presets:[
                '@babel/preset-env'
              ],
              plugins:[
                '@babel/plugin-proposal-class-properties'
              ]
            }
          }
        ]
      },

• 如果我们在js文件中使用装饰器，就会提示

• 提示我们需要对装饰器进行处理

• 我们去Babel官网去查看一下关于装饰器的处理  babel官网

• 这里面就会有相应的解决方案了，点进去查看，下载几个插件，配置一下，就OK了

• 将这个配置配置在webpack.config.js中，在下载@babel/plugin-proposal-decorators插件

npm install @babel/plugin-proposal-decorators -D

 

• 为了处理generator、promise等语法需要配置@babel/plugin-transform-runtime插件

npm install --save-dev @babel/plugin-transform-runtime

npm install --save @babel/runtime

• 然后对插件进行配置

      {
        test:/\.js$/,use:[
          {
            loader:'babel-loader',
            options:{
              presets:[
                '@babel/preset-env'
              ],
              plugins:[
                ["@babel/plugin-proposal-decorators", { "legacy": true }],
                ["@babel/plugin-proposal-class-properties", { "loose": true }],
                "@babel/plugin-transform-runtime"   // 新增
              ]
            }
          }
        ],
        include:path.resolve(__dirname,'src'),
        exclude:/node_modules/    // 这里是为了排除掉node_modules里的文件
      },

• include:path.resolve(__dirname,'src')   指定处理的文件目录

• exclude:/node_modules/      排除处理的文件目录

 

• 添加@babel/polyfill  处理   关于 ‘aaa’.includes(‘a’)这样的语法解析成es5低级语法

npm install @babel/ployfill

 

• 添加eslint JS语法校验

npm install eslint eslint-loader

• 安装好后在module的rules加入新的规则

      {
        test:/\.js$/,
        use:{
          loader:'eslint-loader',
          options:{enforce: 'pre'}  // 强制将JS的处理规则提前
        }
      },

• 加入enforce属性，表示将这个loader的处理前置进行处理   npm的eslint中对enforce的说明

• 此时还差一步，需要到eslint官网下载一个eslintrc.json复制到根目录下，改名为  .eslintrc.json

 

• 将模块暴露给全局window，先安装loader

npm install expose-loader -D

• 用这样的方式暴漏给window，还有另一种方式在webpack.config.js中进行配置

      {
        test:require.resolve('jquery'),
        use:'expose-loader?$'
      },

• 这种方式也是可以的，js文件中正常引用，只需要在webpack.config.js文件中配置即可

• 以上这两种方式看起来还不是很方便，接下来通过webpack的插件将要用到的jQuery注入每个模块，在每个js文件中可以直接使用

const Webpack = require('webpack')
... ...

new Webpack.ProvidePlugin({ // 将jQuery注入每个模块
      $:'jquery'
    })

• 这样在webpack中进行配置就OK了

• 小注意，如果在某一个模块忘记去掉 import $ from ‘jquery’   jQuery文件就会一起打包，为了防止这个问题可以采用这样的配置

externals:{
    jquery:'$'
  },

• 可以采用cnd的方式加载jQuery，就不需要将jQuery一起打包了
• 以上提到了三种方式解决引用jQuery的问题

​​​​​​​​​​​​​​

1. 暴漏到window上面使用expose-loader的方式
2. 给每一个模块提供$通过webpack.ProvidePlugin的方式
3. 通过CDN引用但是不打包externals的方式

转载于:https://my.oschina.net/u/3996596/blog/3044322