• Objectivezt
    2019-08-11
    1:28秒提及到开发阶段使用压缩版,生产使用非压缩版本,为什么不是反过来呀?

    作者回复: 嗯,听的很仔细,点赞。压缩版本在线上环境使用,非压缩版本在开发阶段或者调试时使用。

     1
     5
  • dudustyle
    2019-06-25
    老师,课程跟实际的课程安排好像不一致,漏了几节课,SSR和骨架屏,是要放在后面讲吗?

    作者回复: 放在这节课后面了

    
     3
  • 天青
    2019-06-25
    index.js中判断不同环境引入不同的包,这个判断少了个等号
    process.env.NODE_ENV === 'production'

    作者回复: 嗯嗯,在这个组件库的1.0.1版本是有修复的。视频里面安装的时候也是使用的这个版本

     2
     3
  • coder
    2019-10-23
    在第23分钟的时候,对index.js内容的编写,有一个bug:
    ````
    if (process.env.NODE_ENV = 'production') {
    ...
    }
    ````
    `if`语句里的条件判断,应该用`===`而不是'='。
    展开
    
     2
  • 段子黄
    2019-06-26
    打包出来之后,在html页面中导入large-number.js为什么报 add 方法不存在?我的webpack配置如下
    感觉和你一摸一样啊,libraryTarget 设置为 umd 不是可以支持直接导入 script标签吗?

    const TerserPlugin = require('terser-webpack-plugin')

    module.exports = {
        mode:'none',
        entry:{
            'large-number':'./src/common/largeNumber.js',
            'large-number.min':'./src/common/largeNumber.js'
        },
        output:{
            filename:'[name].js',
            library:'largeNumber',
            libraryTarget:'umd', // 支持AMD CJS ESM script导入等
            libraryExport:'default'
        },
        optimization: {
            minimize:true,
            minimizer: [new TerserPlugin({
                include:/\.min\.js$/
            })]
        }
    }
    展开

    作者回复:
    是因为这个组件编写的时候是直接通过 export default 导出了一个默认的函数:

    export default function add(a, b) {
        let i = a.length - 1;
        let j = b.length - 1;

        let carry = 0;
        let ret = '';
        while (i >= 0 || j >= 0) {
       }
       ......
    }

    所以通过script、或者 ESM/CJS/AMD 的方式引用的时候直接 largeNumber('999', '1') 就可以了。如果想要通过 largeNumber.add() 的方式调用的话,写成 export function add(a, b) {} 的形式,把 default 去掉

    
     2
  • ꯭M꯭u꯭r꯭p꯭h꯭y...
    2019-09-11
    我打了vue组件,打包完,无论是require还是import,都没有正确引入我打包好的内容
    console.log(require('../lib/index.min.js'))
    // 打印出来的是 Module {__esModule: true, Symbol(Symbol.toStringTag): "Module"}

    只有console.log(window.mycomponents)
    // 才能打印出 正确内容 {version: "1.0.0", helloBeehive: {…}, tempButton: {…}}

    说明内容确实引入了,还在window中注册了,但是import和require没法正确使用




    配置信息
    entry: resolve('./src/main.js'),
        output: {
            path: resolve('./lib'),
            filename: 'index.min.js',
            chunkFilename: '[id].js',
            library: lowercamelcase(pkg.name),
            libraryTarget: 'umd',
            libraryExport: 'default',
            globalObject: "typeof self !== 'undefined' ? self : this"
        }


    这个是main.js
    import tempButton from './components/temp-button'
    import helloBeehive from './components/hello-beehive'

    export default {
        version: '1.0.0',
        helloBeehive,
        tempButton
    }
    展开
    
     1
  • Sherry
    2019-08-28
    老师,请问,打包未压缩版本的意义是什么呢?
    【个人理解】
    index.js导出的时候,有判断NODE_ENV,这里的NODE_ENV,是指使用组件的项目的构建环境。
    这样一来,组件使用者在开发过程中,就可以debug到编译过、但未压缩的组件代码了。而生产环境,会打包压缩后的组件代码。
    【疑问】
    如果为了开发者debug方便,为什么不选择开启前面讲过的sourcemap呢?
    如果不开启sourcemap是为了保护源码,不泄露给开发者,那暴露编译过、未压缩的代码,就不算暴露源码了嘛?
    展开
    
     1
  • 野狼
    2019-06-29
    老师好,组件的入口文件index.js使用的是cjs的形式导出代码,有两个问题想请教:
    1.业务代码代码通过ejs的方式可以引用组件,这是因为组件libraryTarget设置成了umd,还是因为业务代码也是使用了webpack打包,webpack自动帮我们做了转换?
    2.组件的入口文件index.js可不可使用ejs的形式导出代码?
    
     1
  • CodingWith
    2020-01-09
    老师您好, 我看到打包出来的js库代码里面包含了webpack runtime代码,但是平时我们用的development代码库 并没有这种代码, 请问他们是怎么做到把runtime代码删除的
    
    
  • kaiking
    2019-12-16
    老师,关于打包一直报strict的严格模式问题,百度了好多方法都无效,已经被困扰了一个星期,麻烦老师帮忙看下,感激不尽!!!

    源码git地址:
    https://gitee.com/kaiking_g/webpack-errors.git
    在该目录下: 3.33.webpack-build-commonent

    展开
    
    
  • kaiking
    2019-12-11
    老师,请问下,webpack4如何打包第三方插件?比如mui,ligerui等

    最近做的项目用webpack4构建工程,前端ui用的是mui,不像jq这种只是一个单独的文件,mui框架都是分模块的,如今打包总是报错
    
    
  • 慢半拍的奥斯卡
    2019-11-24
    为什么npm publish后,提示成功,但是我在npm里面找不到我的包
    
    
  • 凭实力写bug
    2019-11-10
    老师,我试过import 和 require都可以,那么怎么使用<script>呢,我直接把打包代码拷贝过来,引入好像不行呀
    
    
  • Geek_5541c1
    2019-09-13
    打包出来的lib库,在web下运行没问题,如何打包支持node环境运行的lib? 按照教程中打出来的包里面是window的环境,因此,在node环境下运行会报错:
    ReferenceError: window is not defined
    
    
  • loosen
    2019-08-23
    PC端视频播放器终于支持tab暂停和左右键前进后退了,点赞;产品迭代还阔以
    
    
  • 斌
    2019-08-13
    老是您好,我发布自己的npm包,也是导出为umd模块,但是样式无法加载,这个样式需要怎么配置呢。因为这个模块包没有html
    
    
  • Geek_人
    2019-07-25
    index.js中 process.env.NODE_ENV 区分线上环境和生产环境,那么项目中使用的话 是否可以选择其中其一个版本
    
    
  • 范饭飯
    2019-07-11
    😂 老师是不知道数值调用 .toString() 需要用空格隔开吗?
     2
    
  • bug
    2019-07-10
    按照这种打包出来的使用方式,怎么处理依赖包重复打包,比如说,我们编写的a包引用了b包,然后我们在业务代码里面也引用了b包,这样的话就会重复打包了b包
    
    
  • bug
    2019-07-08
    我看打包出来后的代码,是放在window下面的。那如何实现多端都能使用
    
    
我们在线,来聊聊吧