zoukankan      html  css  js  c++  java
  • webpack高级概念,shimming (预置依赖)(系列十)

    以 jquery 为例,代码如下

    // index.js
    import $ from 'jquery'
    $('body').html('HHAHAH')
    import func from './test.js'
    func()
    

    // test.js 

    export default function func() 
    {
      $('body').append('<h1>2</h1>')
    }

    当你不在test.js中引入 import $ from 'jquery'

    打包之后,那么浏览器访问的时候,会报错(变量隔离)

    test.js:5 Uncaught ReferenceError: $ is not defined

    这个时候就需要使用垫片功能,在webapck配置文件中配置

    const webpack = require('webpack')
    
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery'
      })
    ]

    当你加上这段代码后,模块在打包的时候,发现你使用了 $ 就会在test.js模块顶部自动加入 import $ from 'jquery'

    其他关于 shimming 的内容参考 webpack 官网 shimming



  • 相关阅读:
    ubuntu故障处理
    最全http状态码
    go故障排查集锦
    docker知识11---docker service
    docker知识10---docker secret
    windows安装mysql
    信息收集
    模块
    Django:中间件
    Django:ORM单表操作
  • 原文地址:https://www.cnblogs.com/fsg6/p/14492387.html
Copyright © 2011-2022 走看看