前端工程化相关

baidu_41921865

已于 2024-02-18 15:35:16 修改

阅读量470

点赞数 11

文章标签：前端

于 2024-01-13 18:12:43 首次发布

本文链接：https://blog.csdn.net/baidu_41921865/article/details/135572999

版权

本文介绍了如何通过unpkg获取软件包源码，讨论了ESM模块化特性，包括自动严格模式、私有作用域和CORS请求。同时，针对Node.js中非模块化包如lodash的处理以及如何自定义Webpack插件来修改打包过程，以移除JS文件中的注释。

摘要由CSDN通过智能技术生成

工具方法：

知道软件包名，拿到源码或者路径的方法

在浏览器输入以下内容，就可以找到你想要的。。。

unpkg.com/输入包名

一、模块化

ESM特性清单：

自动采取严格模式，忽略“use strict”
每个ESM模块都是单独的私有作用域；
ESM是通过CORS去请求外部JS模块的
ESM的script标签会延迟执行脚本，就要有defer属性相同的作用；

在不支持ESM模块化的浏览器如下配置，只适用于开发环境

二、在Nodejs环境中的使用

内置的包会分别导出，再默认导出

但是像lodash包，没有做模块化导出（不能单个方法引入使用），需要使用默认导出

自己写plugin插件

// 我的 plugin插件
class MyPlugin{
  apply (compiler) { // webpack 启动会自动调用apply方法
    console.log('MyPlugin 启动')
    compiler.hooks.emit.tap('MyPlugin', compilation => {
      // 打包上下文
      for (const name in compilation.assets) {
        // console.log(name) // 文件名
        // console.log(compilation.assets[name].source()) // 文件内容
        if (name.endsWith('.js')) {
          const contents = compilation.assets[name].source();
          // console.log(11,name,contents)
          const withoutComments = contents.replace(/\/\*\*+\*\//g, '');
          compilation.assets[name] = {
            source: () => withoutComments,
            size: () => withoutComments.length
          }
        }
      }
    })
  }
}