课件和源代码下载地址

精选留言(20)

• 
  Objectivezt

  2019-08-11

  1:28秒提及到开发阶段使用压缩版，生产使用非压缩版本，为什么不是反过来呀？

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

  

   4
• 
  dudustyle

  2019-06-25

  老师，课程跟实际的课程安排好像不一致，漏了几节课，SSR和骨架屏，是要放在后面讲吗？

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

  

   3
• 
  天青

  2019-06-25

  index.js中判断不同环境引入不同的包，这个判断少了个等号
  process.env.NODE_ENV === 'production'

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

   1

   3
• 
  coder

  2019-10-23

  在第23分钟的时候，对index.js内容的编写，有一个bug：
  ````
  if (process.env.NODE_ENV = 'production') {
  ...
  }
  ````
  `if`语句里的条件判断，应该用`===`而不是'='。
  

  展开

  

   1
• 
  ꯭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-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 去掉

  

   1
• 
  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下面的。那如何实现多端都能使用

  

  
• 
  RELAX

  2019-07-01

  一开始听的很懵逼，但是坚持下下来，发现越听越明白。感觉思路都打通了。

  作者回复: 强，厉害了

   1

  
• 
  野狼

  2019-06-29

  老师好，组件的入口文件index.js使用的是cjs的形式导出代码，有两个问题想请教：
  1.业务代码代码通过ejs的方式可以引用组件，这是因为组件libraryTarget设置成了umd，还是因为业务代码也是使用了webpack打包，webpack自动帮我们做了转换？
  2.组件的入口文件index.js可不可使用ejs的形式导出代码？

  

  
• 
  sandy

  2019-06-25

  老师讲的很好，点赞

  作者回复: 🙏感谢夸奖

  

  