标签： webpack

近期用 webpack-dev-server 作代理的一些经验

如今前端开发使用 webpack-dev-server 作为本地服务器已经是基本配置，加上 proxy 功能可以很好的应对 SSL、跨域、线上环境切换等需求。Vue CLI 3 里也做了相应的集成，用起来很方便。
（更多…）

2019年1月28日
Vue 小贴士
书说简短：
1. 使用 Vue + Webpack 开发
2. 使用 CDN 加载依赖
3. 在开发阶段尽量不要使用压缩的文件，一边取得尽量全面的错误信息
（更多…）
2018年2月10日
Webpack 3 笔记

我使用的版本：3.5.1

我是渐进式使用 webpack 的，一开始只用它打包 js。但是现在开始会把越来越多的依赖交给它管理，所以记一篇笔记。这篇不是教程，而是结合开发经验，总结一些特定需求的解决方案。
（更多…）

2017年8月10日
使用 Webpack 时需避免循环引用
开发日历控件的时候，对方变更了一下需求，基本上将最终产品分成两个：
1. 选择连续时间段
2. 选择多个不连续时间
那么我们知道，对于这种大部分功能一致，只有若干函数逻辑不同的产品，最合适的就是状态模式。于是很自然的，我就拿“2”作为标准模式，“1”作为新模式，将其重构成父类和子类，大概关系如下：
```
// 父类
// DatePicker.js

import RangeDatePicker from './RangeDatePicker';

class DatePicker {
  ....
  static getInstance(el, options) {
    if (options.scattered) {
      return new DatePicker(el, options);
    } else {
      return new RangeDatePicker(el, options);
    }
}


// 子类
// RangeDatePicker.js

import DatePicker from './DatePicker';

class RangeDatePicker extends DatePicker {

}
```
因为这个类只有两个成员，所以我把工厂方法 .getInstance() 放到了父类里面，通过判断参数确定应该返回哪一类实例。代码写完，测试的时候却报错：

Super expression must either be null or a function, not undefined

这个意思很明显，被继承的父类不能未定义。然则 DatePicker 明明是定义了的，只是验证两个类文件的话，均未出现任何语法错误。

遇事不决先 Google，还真找到很多结果，不过大多数都和 React.Component 有关，翻了半天一无所获，只好自力更生。打开 Chrome 开发者工具，勾上“Pause on Exceptions”，观察发生异常时的状况，一遍又一遍，我渐渐意识到，发生这个错误的时候，DatePicker 还未能在 webpack 的环境中完成注册。问题找到了！

与其它编译类语言不同，JS 是动态语言，所有 JS 代码都是放到统一的环境里跑的，类的代码如此，import 也是如此。所以对于其他语言，比如 ActionScript、Java，循环引用，即 A 引用 B，B 也引用 A，是没问题的，因为类的代码都会编译到执行文件，执行的时候，都已经在环境中；而 JS 是边执行边置入环境，具体到我这里，在将父类 DatePicker 放入环境时，会先 import 子类 RangeDatePicker 的代码，而子类又会要求 import 父类的代码，父类的代码正在引入中，于是便产生了问题。

想明白这点，后面就好办了，直接创建一个工厂类，把工厂方法放到里面执行，问题便解决了：
```
import DatePicker from './DatePicker';
import RangeDatePicker from './RangeDatePicker';

export default {
  createDatePicker(el, options) {
    if (options.scattered) {
      return new DatePicker(el, options);
    } else {
      return new RangeDatePicker(el, options);
    }
  }
}
```
PS：当年写依赖注入和包管理工具的时候，就卡在这个地方，怎么都想不通，于是一直也没写完。没想到这些个浓眉大眼有头发的，也都这么不负责任，这种问题都不解决就搞出来让全世界人用了。
2017年3月1日
Gulp 中顺序执行任务
书接上文，Chrome 插件中无法直接使用 Handlebars 处理模板。两种方案，一是利用沙箱，将 .eval() 放在独立的环境中执行，好处是其它跨域的操作也能这样处理，坏处是写起来麻烦。另一种则是利用 Handlebars 的“预编译”功能，将模板提前编译好，直接在代码中引用。好处是写起来更顺畅，并且从发布插件的角度来看，早晚都要这样做。

我决定选用后者，于是我需要把模板提取出来进行预编译，然后我准备写个 Gulp 任务来搞定这个。

从页面中提取模板不算太难，写个正则就好，这里提前约定，模板使用 <script type="x-handlebars-template"> 标签包裹。
```
gulp.task('template', function () {
  let promise = new Promise((resolve, reject) => {
    fs.readFile('popup.html', (err, content) => {
      if (err) reject(err);
      resolve(content);
    }
  });
  promise.then((content) => {
    content.replace(/<script([^>]*)>([\S\s]+?)<\/script>/g, (match, attr, template) {
      // 具体处理模板，略掉了
    });
  })
});
```
模板编译之后，还需要用 Webpack 打包才能使用，于是要增加 Webpack 的任务。这个比较简单，参考它的文档即可。不过很明显，必须等全部模板预编译完成才能打包。之前我已经试过用 run sequence 顺序执行任务，不过这里我用到 Promise，情况似乎有变。

稍微 Google 一下，得知要能顺序执行任务有三种选择：

使用 callback
```
gulp.task('task', function (callback) {
  setTimeout(function () {
    // 任务执行完成后，调用 callback
    callback();
  }, 5000);
});
```
返回 stream

这个好像是标准做法，也是我之前做的。
```
gulp.task('task', function (callback) {
   returen gulp.src('*.js')
     .pipe(uglify())
     .pipe(gulp.desc('dist/');
});
```
返回 Promise 对象
```
gulp.task('task', function () {
  return new Promise(resolve, reject) => {
    resolve();
  });
});
```
既然支持 Promise 那就好办了，在 .then() 前面加一个 return 就好。

完整代码

参考文章

Handling Sync Tasks with Gulp JS
2016年3月5日