blog
blog copied to clipboard
lmk123
个人技术博客，博文写在 Issues 里。
使用 ES6（借助了 Babel 的力量）写代码已经很长时间了，中间碰到了几个坑，记录一下。 ## Promise 中的未捕获错误 下面的代码会报错，因为里面的 `x` 未定义： ``` js new Promise( resolve => resolve( x + 1 ) ).then( ()=> console.log( '一切正常' ) ); ``` 不过按照标准，浏览器不会给出任何错误提示，因为错误会被传递到 `catch()`...
自从接触到 [Webpack](https://github.com/webpack/webpack) 之后我就爱上了它。 从 #27 开始，我就在我的项目里全面使用 Webpack 了，无论是写一个小的工具库（如 [selection-widget](https://github.com/lmk123/selection-widget)、[connect.io](https://github.com/lmk123/connect.io)）还是一个完整的“产品”（[划词翻译](https://github.com/lmk123/crx-selection-translate)）。 说起来，一开始关注 Webpack 是因为我很喜欢 [Vue.js](https://github.com/vuejs/vue)，而它就是使用 Webpack 进行开发的，但我一直以来都有一个疑惑：为什么 Vue.js [生成出来的代码](https://github.com/vuejs/vue/blob/dev/dist/vue.js)如此干净？你可以对比一下我的 connect.io 项目[用 Webpack 生成的代码](https://github.com/lmk123/connect.io/blob/master/dist/connect.js)。 然后我发现，Vue.js 在开发时用的是 Webpack，但是最后将文件打包在一起的时候用的是 [Rollup](http://rollupjs.org/)（见 [vue/build.js](https://github.com/vuejs/vue/blob/dev/build/build.js)）。生成的代码之所以这么干净，是因为 Vue.js 本身除了 ES6 module，几乎没有用到其它...
在 Windows 下安装 Node.js 时，若启用了 `Add to PATH` 选项（默认启用），但当前账号又没有足够的权限读写环境变量时，在安装过程中会弹出警告，安装结束后运行命令行 `node -v` 和 `npm -v` 都会提示“命令不存在”。 这种情况下，我需要手动将 node 与 npm 这两个路径添加到环境变量中。 首先需要知道安装 Node.js 时的安装路径。默认情况下，Node.js 会被安装到 `C:\Program Files\nodejs`。 依次打开“控制面板”->“系统”->“高级系统设置”，切换到“高级”选项卡，点击下方的“环境变量”按钮，在用户变量里或者系统变量里找到名为 `PATH` 的变量，然后单击它并点击下方的“编辑”，在值里面**追加**上面说的 Node.js...
最近公司要开发一个内部使用的安卓客户端。我想到 PhoneGap 可以使用网页技术开发手机应用，于是自学了 PhoneGap 。总的来说，除了安装 SDK 麻烦一点，其它跟开发 Chrome 扩展差不多。 ## 开发前的准备 开发之前，需要先安装你的目标平台 SDK，而我只需要安装 Android SDK 就够了。 ## 安装 Android SDK 先去下载一个 [Android SDK 管理工具](http://developer.android.com/sdk/index.html#Other)；如果官方地址打不开，也可以到[这里](http://www.androiddevtools.cn/#sdk-tools)下载。对于 win7 用户，安装完成后还需要在 `PATH` 环境变量中追加一段 `;D:\AndroidSDK\tools` ，这个地址指向你的...
在阅读之前，你最好先熟悉 FileSystem API。我强烈向你推荐[这篇文章](http://www.html5rocks.com/en/tutorials/file/filesystem/)。 最近做一个 PhoneGap 程序要读写手机里的文件，于是深入研究了一番在 PhoneGap 里的文件系统。下面的结论都是在_小米3_手机上测试出来的，在其它手机上可能会有点不同。 ### 手机文件系统的关键目录 首先，必须得安装这个插件：[cordova-plugin-file](https://www.npmjs.com/package/cordova-plugin-file) 并仔细阅读这个插件的自述文档。 为了看看自述文档里的 `cordova.file` 到底是个什么东西，我在 GapDebug 把这个对象打印出来了：  由此可以看到，这些关键的目录分为两种：内部存储目录和外部存储（即 SD 卡）目录。 但是目前的许多安卓手机也开始向 iPhone 学习，不允许安装 SD 卡了，比如我使用的小米3就是如此。经过反复测试，发现此时应该使用外部存储目录，即上图中的 `external***Directory`。一个可能的猜想：如果 `external***Directory` 不是 null，则应该使用外部存储目录。...
[Protractor](https://github.com/angular/protractor) 是 AngularJS 官方推出的端到端测试工具。本来要安装这个工具非常简单： ``` npm install -g protractor webdriver-manager update webdriver-manager start ``` 但是由于某墙的存在，在执行第二步的时候会报错： ``` C:\>webdriver-manager update Updating selenium standalone downloading https://selenium-release.storage.googleapis.com/2.45/selenium-server-standalone-2.45.0.jar... Updating chromedriver downloading https://chromedriver.storage.googleapis.com/2.14/chromedriver_win32.zip... Error: Got error...
最近一边在做各种 AngularJS 程序，一边完善自己的 [AngularJS 项目脚手架](https://github.com/lmk123/angularjs-all-lazyload)。今天想把 [$httpBackend](https://docs.angularjs.org/api/ngMockE2E/service/$httpBackend) 集成到 [Protractor](https://github.com/angular/protractor) 里面去，伤了一会儿脑筋。。 使用这个服务最简单的办法就是直接在项目里依赖它，可是每次项目上线前，我都需要回到源码里删除跟 `$httpBackend` 有关的代码：删除 `angular-mocks.js` 的引用、删除 `ngMockE2E` 的依赖，还要删除配置 `$httpBackend` 的代码段。 在 Protractor Issues 里有[关于这个问题的讨论](https://github.com/angular/protractor/issues/125)。 后来我大致看了一遍 Protractor 的文档，看到了两个关键的方法：[browser.executeScript](http://angular.github.io/protractor/#/api?view=webdriver.WebDriver.prototype.executeScript) 与 [browser.addMockModule](http://angular.github.io/protractor/#/api?view=Protractor.prototype.addMockModule)。（让我吐槽一下这份文档，我网上查了一个小时，就是不知道上哪找 `webdriver` 来调用 `executeScript`...
当 [AngularJS](https://angularjs.org/) 刚问世的时候，我一眼就看到（并认为）它把逻辑写在了模板里： ``` html 编辑 ``` 这也是我一直不看好、并且再也没有关注过它的原因。 然而前两天，我买了两本书（《用 AngularJS 开发下一代 Web 应用》与《AngularJS 权威指南》），并准备深入学习它。原因起于一个 PhoneGap 手机 APP。 ## 为何学习 AngularJS 当我开发这个 APP 的时候，我的思想仍然停留在“网站”的层面上。于是我组织代码的形式就跟搭一个网站一样。 可是写到后面，我发现使用“网站”的经验来写手机 APP 有点力不从心了。在构建网站的时候，一般都是已经由服务器构建好了页面，然后再使用 [jQuery](http://jquery.com/)、[doT](http://olado.github.io/doT/index.html) 等方式操作 [dom](http://zh.wikipedia.org/wiki/文档对象模型)；但这样让大部分的代码都绑死在了 dom...
我的项目使用了 monorepos 模式，然后今天发现了一个现象。 项目结构大致如下： ``` root/ apps/my-app index.js packages/my-package index.js package.json ``` `my-package/index.js` 代码如下： ```js console.log('my-package 入口') export { someFn } ``` 且 my-package/package.json 里加入了 `sideEffects: false`。 my-app/index.js 代码如下： ```js...
以前，我对 `sideEffects: false` 的理解仅停留在以下两个方面： - 在 package.json 中加入 `sideEffects: false` 可以让 Webpack 进一步减少捆绑包的体积 - 加入 `sideEffects: false` 可能导致代码运行不正确 作为模块开发者，我对于如何正确的使用 sideEffects 才能让代码正常运行一直都很模糊，今天我觉得我终于弄懂了这个问题，于是记录一下。 ## 什么代码算是有副作用（side effect）的？ Webpack 对副作用的定义是：（[来源](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free)） > A "side effect"...