a Blog system built on GitHub GraphQL API with Vue SSR
Home Page: https://blog.1stG.me
License: MIT License
轮子主义初级阶段 v0.0.1 @1stG.me
Write Less, Think More.
Please consider to sponsor me if you find my works useful, buy me a coffee for example:
OpenCollective:
patreon: https://patreon.com/1stG
爱发电：https://afdian.net/@JounQin
| 1stG | RxTS | UnTS |
|---|---|---|
 |
 |
 |
| 1stG | RxTS | UnTS |
|---|---|---|
 |
 |
 |
7.0.35 to 7.0.36.This version is covered by your current version range and after updating it in your project the build failed.
@types/koa-router is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
0.2.0 to 0.2.1.This version is covered by your current version range and after updating it in your project the build failed.
@types/mini-css-extract-plugin is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
4.30.0 to 4.31.0.This version is covered by your current version range and after updating it in your project the build failed.
webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
errors-warnings stats presetThe new version differs by 23 commits.
2e1e179 4.31.0b17543e Merge pull request #8919 from vincentrodriguez/errors-and-warnings-only-presetfed4c3d Merge pull request #8985 from webpack/dependabot/npm_and_yarn/react-dom-16.8.6d05435c Merge pull request #9062 from webpack/dependabot/npm_and_yarn/eslint-plugin-jest-22.5.18bf8b82 Merge pull request #9066 from webpack/dependabot/npm_and_yarn/eslint-config-prettier-4.2.000d0038 Merge pull request #9096 from webpack/dependabot/npm_and_yarn/glob-7.1.4dbd856e Merge pull request #9098 from webpack/dependabot/npm_and_yarn/simple-git-1.113.013045f1 chore(deps-dev): bump simple-git from 1.110.0 to 1.113.05800043 chore(deps-dev): bump glob from 7.1.3 to 7.1.4084ca0b chore(deps-dev): bump eslint-config-prettier from 4.1.0 to 4.2.0022d1b7 chore(deps-dev): bump eslint-plugin-jest from 22.4.1 to 22.5.181cf088 Merge pull request #9046 from mwijngaard/masterdc6dd51 Allow top-level return in script parsing. Fixes issue 8509 in master, like PR 8510 fixed it for 'next'42db81a Merge pull request #9029 from EugeneHlushko/mode/warning84ca105 mode(warning) update mode warning snapshot hashThere are 23 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
dependency apollo-link-http was updated from 1.5.14 to 1.5.15.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the apollo-link group definition.
apollo-link is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
2.5.17 to 2.5.18.This version is covered by your current version range and after updating it in your project the build failed.
vue-template-compiler is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
5.10.1 to 5.11.0.This version is covered by your current version range and after updating it in your project the build failed.
koa-session is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
The new version differs by 5 commits.
5ca903f Release 5.11.0b79134d feat: make sure session id is global unique (#170)c2b4259 fix: remove package-lock.json23ad871 deps: Fix security vulnerabilities from npm audit (#163)1600aab test: changed "ctx.session is mockable" tests names to more appropriate (#158)See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
[zh]
Angular 官方对将 Angular.js 应用升级至 Angular 有相关的官方指导，但指导中的情况相对比较理想，Angular.js App 代码都会被重写为 Angular 代码，最终可以移除所有的 Angular.js 相关的依赖。但实际的商业项目中，往往 Angular.js 代码可能会非常多，设计模式也可能千奇百怪，迁移重写至 Angular 的成本非常高，所以很多用老的 Angular.js 应用升级到 Angular 过程中会长时间保持混合(Hybrid)模式。
目前灵雀云 Alauda EE 产品的前端项目就是一个典型的混合应用，而今年以来我们是产品重心不断往 kubernetes 迁移，很多老的模块都不再做产品升级，所以遗留的 Angular.js 代码也不会做重大调整，迁移到 Angular 意义不大，但一直保留 Angular.js 相关代码在主产品中也是一种累赘，所以我们一直想把 Angular.js 和 Angular 的代码分离开，今天就来分享一下这次的实践工作。
最初我们的想法很简单，直接将两部分拆分成两个应用，但这会导致两个应用互相跳转时会整个页面重新刷新，体验会非常差。之后又考虑了将 Angular.js 应用以 iframe 的模式嵌入到 Angular 应用中来避免应用跳转时整个页面重新刷新的情况，但这种情况从 Angular 应用每次跳转到 Angular.js 应用时 iframe 都是重新加载的（现在想来其实也可以从 Angular.js 跳出时只是将 iframe 隐藏，跳回将 iframe 回显），但是在之前迁移过程中 Angular.js 中的部分组件和服务已经由 Angular 版本降级提供，再重写这些组件和服务回 Angular.js 版本得不偿失，因此又要将 Angular.js 应用包裹在一个 Angular 应用中，似乎依然不是一个好的选项。最终我们采取了在 Angular 应用中懒加载 Angular.js 应用的方式完成了混合应用的分离工作，只有进入遗留模块的时才会加载 Angular.js 应用代码。
在真实的项目应用中，应用肯定是由路由来分离成一个个子模块的，我们首先利用 Angular 提供的惰性加载功能将应用多个子模块分离开，增加一个降级相关的模块：
{
path: '**',
loadChildren: './downgrade/downgrade.module#DowngradeModule',
},即将 Angular 无法处理的所有路由都交由降级的 Angular.js 应用处理，而在 DowngradeModule 中用
RouterModule.forChild([
{
path: '**',
component: DowngradeComponent,
},
]),将所有路由都使用 DowngradeComponent 进行渲染处理，同时在 DowngradeModule 中引入 Angular.js 应用入口代码，但不引导启动，同时将外部已经加载的一些 Angular 组件和服务通过 downgradeComponent 和 downgradeInjectable 降级到 Angular.js 应用中使用。而在 DowngradeComponent 中只需要设置模版为 <div ui-view></div>，然后在 ngOnInit 声明周期中进行 Angular.js 应用的引导启动：
@Component({
template: '<div ui-view></div>',
})
export class DowngradeComponent implements OnInit {
constructor(private upgrade: UpgradeModule, private elRef: ElementRef) {}
ngOnInit() {
this.upgrade.bootstrap(this.elRef.nativeElement, ['app'], {
strictDi: true,
})
setUpLocationSync(this.upgrade)
}
}至此基本就大功告成啦，真的！
既然说是『基本』，自然还有一些优化收尾工作要做，因为还有一些边界情况需要处理：
DowngradeComponent 的 ngOnInit 声明周期每次都会执行一次，导致 Angular.js 应用会产生多个实例，继而进入同一个 Angular.js 路由时 API 可能被重复调用多次，所以我们需要在 DowngradeComponent 的 ngOnDestroy 声明周期将 Angular.js 应用销毁以待下次重新引导启动：this.upgrade.$injector.get('$rootScope').$destroy()。$urlRouterProvider.otherwise 处理 Angular.js 应用本身无法处理的路由。angular.module('app').config([
'$locationProvider',
'$urlRouterProvider',
(
$locationProvider: angular.ILocationProvider,
$urlRouterProvider: UrlRouterProvider,
) => {
let ngRoutes: string[]
$urlRouterProvider.otherwise(($injector, $location) => {
// 注意须先将 Angular Router 通过 `downgradeInjectable` 降级到 Angular.js 中使用
const ngRouter = $injector.get<Router>('ngRouter')
if (!ngRoutes) {
ngRoutes = ngRouter.config.map(({ path }) => path)
}
// 我们只在乎第一级路由是否能被 Angular 处理
const canBeHandled = ngRoutes.includes($location.path().split('/')[1])
ngRouter.navigateByUrl(canBeHandled && $location.url(), {
replaceUrl: !canBeHandled,
})
})
$locationProvider.html5Mode(true)
},
])到此就真的结束啦。（要是贵司项目有特别的用法无法覆盖欢迎打脸）
对比之前想的两种方案，页面打开渲染速度提升了不少，可以说是又快又好用的方案了！当然此方案比 Angular 应用一加载时就整个 Angular.js 应用并引导启动的情况会稍微慢一点，毕竟每次进入都要重新引导启动，但相对来说成本已经很低了，而且大部分页面用不到 Angular.js 的情况下由于 Angular.js 应用被惰性加载了，页面渲染速度也会有提升。
这次分离实践演示源码：https://github.com/JounQin/ng-study/tree/master/src/app/console/downgrade 。
4.2.2 to 4.3.0.This version is covered by your current version range and after updating it in your project the build failed.
@types/koa-bodyparser is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
2.0.0 to 2.0.1.This version is covered by your current version range and after updating it in your project the build failed.
sass-resources-loader is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
3.0.1 to 3.0.2.This version is covered by your current version range and after updating it in your project the build failed.
vue-router is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
The new version differs by 133 commits.
cf9dc11 [release] 3.0.27f9ed30 [build] 3.0.2d97d902 docs(kr): fix this$.route to this.$route (#2484)701d02b docs(ja): Fix incorrect bold style (#2459)da1e648 chore(readme): fix badgec7050bc docs: fix type of props option in RouteConfig api10e3f33 docs(ru): Improved translation (#2448)09fea62 Update nested-routes.md (#2436)51f7971 docs(vuepress): move fr gitbook doc to vuepress (#2411)8dadf97 types: error handlers get an Error as first argument (#2377)9196bb0 types: add component type to in-component guards (#2382)99c4436 docs(ja): update docs (#2376)b2e0525 docs: [RU] Translation update (#2352)dc48bb6 chore(examples): add missing semicolon in CSS file from transitions example (#2379)8369c6b fix(hash): support unicode in initial routeThere are 133 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
2.6.2 to 2.6.3.This version is covered by your current version range and after updating it in your project the build failed.
rimraf is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 6 commits.
9442819 2.6.342fe369 autopublish scripts21fd3df bin test8f1d3a1 update tap and glob for security stufff0bc3a1 update tap, add package-lock692022b travis node version updatesSee the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
4.4.17 to 4.4.18.This version is covered by your current version range and after updating it in your project the build failed.
@types/webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
2.3.0 to 2.4.0.This version is covered by your current version range and after updating it in your project the build failed.
node-fetch is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
See CHANGELOG.
The new version differs by 13 commits.
c9805a2 2.4.0 release (#616)49d7760 Pass custom timeout to subsequent requests on redirect (#615)cfc8e5b Swap packagephobia badge for flat style (#592)2a2d438 Adding Brotli Support (#598)05f5ac1 Node 12 compatibility (#614)432c9b0 support reading blob with stream (#608)0ad136d Added new reading method to blobbee2ad8 ignore buffers recalculatione996bda Quick readme update1c2f07f Headers should not accept empty field name (#562)7d32932 Unify internal body as buffer (#552)35a4abe Fix spelling mistake (#551)2d0fc68 Clone URLSearchParams to avoid mutation (#547)See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
[en]
We use [locale] to separate different locale transitions, and [_end_] to finish translation part.
In article title: common header [en] content [zh] 内容 [_end_] common footer
In article content:
[zh]
我们使用 [locale] 来分割不同的本地翻译，以及 [_end_] 来结束翻译部分。
文章标题中： common header [en] content [zh] 内容 [_end_] common footer
文章内容中：
[end]
common header
[en]
content
[zh]
内容
[_end_]
common footer
8.1.0 to 8.1.1.This version is covered by your current version range and after updating it in your project the build failed.
vue-property-decorator is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
The new version differs by 9 commits.
11ebc64 version 8.1.198c361c Merge pull request #201 from DavidEspinola/master9b4017b Merge pull request #200 from sobolevn/patch-166e145d Merge pull request #198 from lx1036/master556a12a Merge pull request #193 from CherishIt/patch-117f5f98 fix @Emit return value to make it transparent4eba290 Fixes typo in README.md382d8da Add missing comma in README.md2f884f7 Update README.mdSee the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
| Branch | Build failing 🚨 |
|---|---|
| Dependency | hexo |
| Current Version | 3.3.0 |
| Type | dependency |
This version is covered by your current version range and after updating it in your project the build failed.
As hexo is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪
There is a collection of frequently asked questions and of course you may always ask my humans.
Your Greenkeeper Bot 🌴
[zh]
工作过程中我们一般会使用公司老同事提前写好的各种基础组件，我们在项目中随心所欲地根据组件 API 文档或源码进行调用，似乎从没想过如果是自己来从头开始设计这些基础组件会是什么样子？我能设计得更合理、比现在的组件更好用吗？回想很久之前自己实现的某些基础组件真的完美了吗？Angular、React、Vue 目前来看是前端界的三大支柱，使用他们分别进行组件化开发实现上会有哪些不同？🤓
我相信这些问题值得我去探索，所以今天要在这里为自己接下来学习生活立一下 flag ，接下来每隔一段时间我将分别使用三大框架去总结实现一个产品中常用的基础组件，它们将尽可能共享一套样式源码，即一套样式多个框架实现，最大化复用。
它有可能并不会比原来更好，也有可能会使用目前已有的较好的解决方案，还有可能只是实验玩具性质的，甚至有可能会无疾而终，但无论怎样它都是我拥有的。😘
为了避免组件跟已有第三方包重名，所有组件和代码都将放到 1stg 这个组织下（npm + GitHub），UI 前缀就取 g- 好了，所以它叫 GUI 。💖
这个 flag 的学习目标不是实现一个个大而全的基础组件，而是实现一个个简单、易于扩展的基础功能组件。
一个已完成的非 UI 组件 —— 翻译功能的实现，它并不是 i18n ，因为没有去考虑单复数、货币本地化等相关功能，而是简单地映射不同语言的文本，这在大部分中小项目里是可以接受的。
[en]
This blog system is not a node module for now, and you need to download whole project from GitHub.
After downloading, you need to create a file named .env.local in your project root.
NODE_ENV=development # If you want to develop this project
APP_KEYS=APP_KEYS # define APP_KEYS for koa-session
GITHUB_TOKEN= # define your own GitHub token for calling GitHub API
# If you want user to login, you need define following variables, more detail: https://github.com/settings/applications/new
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
GITHUB_OAUTH_CALLBACK=http://localhost:7000/api/oauthAnd also, you need to modify .env file to enable your own GitHub repository information.
GITHUB_REPOSITORY_OWNER_TYPE should be user or organization .
GITHUB_EXCLUDED_LABELS represents which issue labels you want to exclude displaying in your blog.
Then install dependencies for development or building (yarn) or for production (yarn run prune).
That's all you need to do!
Start the sever on development: yarn dev or on production: yarn build && yarn start.
This project provides some useful scripts to deploy to your own server.
If you're using Travis , it will automatically sync built assets to a branch named asstes, then on your own server, you can run yarn sync:pull to sync assets into a folder named assets, finally you can simply run yarn pm2 to use pm2 holding your server.
[zh]
这个博客系统目前还不是一个 node 模块，你必须从 GitHub 下载整个项目。
下载完成后，你需要在项目根目录创建一个名为 .env.local 的文件
NODE_ENV=development # 如果你希望开发这个项目
APP_KEYS=APP_KEYS # 为 koa-session 定义 APP_KEYS
GITHUB_TOKEN= # 为调用 GitHub API 定义你自己的 GitHub 令牌
# 如果你希望用户可以登录，你需要定义以下的变量，更多详情：https://github.com/settings/applications/new
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
GITHUB_OAUTH_CALLBACK=http://localhost:7000/api/oauth另外你还需要修改 .env 文件以启用你自己的 GitHub 仓库信息。
GITHUB_REPOSITORY_OWNER_TYPE 应该是 user 或者 organization .
GITHUB_EXCLUDED_LABELS 代表你希望在你的博客内容中排除的 issue 标签。
然后在开发环境或者打包前运行 yarn 或者在生成环境运行 yarn run prune 安装依赖。
这就是你需要做的所有准备工作！
开发环境运行 yarn dev 启动服务器或者在生产环节运行 yarn build && yarn start 。
这个项目提供一些有用的脚本帮助你发布到自己的服务器上。
如果你正在使用 Travis ，它会自动同步构建生成的资源到一个名为 asstes 的分支上，然后你可以在自己的服务器上运行 yarn sync:pull 来同步 assets 到目录 dist 中，最后你可以简单地运行 yarn pm2 以使用 pm2 在后台运行你的应用。
dependency apollo-link-http was updated from 1.5.14 to 1.5.15.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the apollo-link group definition.
apollo-link is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
1.3.12 to 1.4.0.This version is covered by your current version range and after updating it in your project the build failed.
apollo-cache-inmemory is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
The new version differs by 121 commits.
449788f chore: Publishae68d29 Update CHANGELOG.md versions.c2295e6 Merge pull request #4319 from apollographql/avoid-copying-entire-cache-for-optimistic-reads4a87022 Mention PR #4319 in CHANGELOG.md.fc3c3f1 Remove InMemoryCache methods that are now identical to ApolloCache methods.d92fc1c Remove redundant this.transformDocument calls from InMemoryCache.801a490 More comments and a few minor simplifications.531aa32 Reapply remaining layers in removeOptimistic by rerunning transactions.acca75c Avoid copying entire cache on each optimistic read.d9c5c32 Remove graphql-anywhere and apollo-boost from bundlesize (#4318)6b438f2 chore(deps): update dependency typedoc to v0.14.2c8358c0 fixed silly typo (missing end quote) (#4313)8b35a96 chore(deps): update dependency tslint to v5.12.1b1e1d9a chore(deps): update dependency rollup to v1.1.0af94439 chore(deps): update dependency lerna to v3.10.5There are 121 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
9.4.3 to 9.4.4.This version is covered by your current version range and after updating it in your project the build failed.
autoprefixer is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
4.4.14 to 4.4.15.This version is covered by your current version range and after updating it in your project the build failed.
@types/webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
[zh]
就我所知大部分公司的部署环境都是类 Linux 操作系统，毕竟人家免费嘛，但有很多公司分配给开发人员的开发机却是 Windows PC，这就造成了开发人员的开发环境与实际生产环境是不同的操作系统，这自然会影响我们的部分开发体验，这其中又有一部分公司使用虚拟化的云桌面技术为开发人员配置统一的开发平台，但另一部分企业还是在 Windows PC 开发到 Linux 部署。
曾今很多 Windows 用户使用虚拟机来假装使用 Linux，但虚拟机需要占用庞大的系统资源，Docker 的出现使轻量级虚拟化技术成为可能，借助 Docker 我们可以像运行一个小程序一样地在 Windows 上运行一个 Linux 系统，几乎无感地获得完全一致的开发、构建体验。
关于 Docker 的一些基本使用细节可以查看专栏文章Docker 配置与实践清单。另外说些题外话：阿里巴巴几乎所有研发人员均使用 MacBook Pro 进行开发，所以可能没有这样那样的困扰，欢迎大家私信投简历，详见阿里南京 2019 秋招季/社招，诚邀加入~。
在我们使用 Docker for Windows 之前我们需要首先构想一下使用 Docker 的前端项目应该是什么样的？
上述的 1 和 2 要求我们需要区分开发环境和生产环境的 Dockerfile 配置。Let's do it!
# Dockerfile.dev，即开发环境使用的配置文件
FROM node:alpine
RUN mkdir -p /app
VOLUME ["/app"]
WORKDIR /app
# 开发环境我们使用 nodemon 服务在需要的时候自动重启开发服务器
CMD ["npx", "nodemon"]
EXPOSE 7000
EXPOSE 7001# Dockerfile，即生产环境使用的配置文件
FROM node:alpine
RUN mkdir -p /app
WORKDIR /app
ADD . /app
RUN yarn \
&& yarn build \
&& yarn run prune \
&& yarn cache clean
CMD yarn start
EXPOSE 7000哇哦，短短 30 行左右的配置内容就完成了，如果你会用 Docker 那这简直就是小儿科。
我们重点说一说开发配置，因为生产构建就算原生平台是不同操作系统，构建时都是在 Docker 镜像内，完全一致。
开发环境我们使用 koa 配合 koa-webpack 提供开发服务：cross-env DEBUG=1stg:* NODE_ENV=development ts-node server，其中我们需要注意：
Docker 容器内 koa 监听的 host 应该是 0.0.0.0 或其他具体的局域网 IP 地址而不能是 localhost 或 127.0.0.1，否则服务只能在容器内访问，在容器外 host 无法匹配成功将无法访问
koa-webpack 需要分别配置 client 和 server 端的 host
koaWebpack({
config,
hotClient: {
host: {
client: '*', // 直接使用访问 url 的 host 作为 socket 的 host，避免跨域问题
server: serverHost, // 服务端仍直接监听上述 0.0.0.0 host
},
port: serverPort + 1, // 固定 socket 端口并直接暴露给外部使用，否则默认情况下随机变化未映射的端口外部无法直接访问
}
})然后我们开始构建开发镜像：
docker build -f Dockerfile.dev -t docker-study:dev .
接下来就可以直接指定数据卷和暴露端口映射运行它了：
docker run -it --name docker-study-dev -p 7000:7000 -p 7001:7001 --rm -v $PWD:/app docker-study:dev
可以看到数据卷要求提供绝对路径，因此这里我们使用 $PWD 取环境变量的方式使用当前项目根目录避免不同机器路径的有变化。
至此，非 Windows 平台的 Docker 开发环境就搭建好了。
拿到 Windows 平台运行一下会发现一些问题：
$PWD，需要使用 %cd% 代替关于第二个问题自然是有 workaround 的啦。
nodemon 提供了 legacy-watch 模式，webpack 提供了 poll watch 模式，它们的本质都是延时自动比对文件变化。
因此针对 Docker for Windows 我们需要做两点变化：
需要传递参数给 nodemon 启用 legacy-watch，我们不希望继续增加 Dockerfile，同时对非 Windows 平台仍应使用默认 watch 参数，因此需要对 Dockerfile 进行调整，即将 CMD 修改为 ENTRYPOINT 使运行容器时外部可以传递参数进来，即
FROM node:alpine
RUN mkdir -p /app
VOLUME ["/app"]
WORKDIR /app
ENTRYPOINT ["npx", "nodemon"]
EXPOSE 7000
EXPOSE 7001koa-webpack 启动 webpack-dev-middleware 时根据运行环境决定是否启用 poll watch 模式，所以需要我们传递一个 IS_IN_DOCKER_FOR_WIN 环境变量到 Docker 容器，即
koaWebpack({
config,
hotClient: {
host: {
client: '*',
server: serverHost,
},
port: serverPort + 1,
},
devMiddleware: {
publicPath: null,
watchOptions: {
poll: !!process.env.IS_IN_DOCKER_FOR_WIN,
},
},
})最终，在 Windows 平台上我们运行 Docker 容器的命令变为：
docker run -it -e IS_IN_DOCKER_FOR_WIN=1 --name docker-study-dev -p 7000:7000 -p 7001:7001 --rm -v %cd%:/app docker-study:dev -L
至此，Windows 平台中也可以与 Linux 共享同样的文件系统正常开发啦！
本次示例项目代码请移步：https://github.com/JounQin/docker-study
PS: 小练习——请使用 Node.js 将 dev/dev:win npm script 合并成一个命令，即自动判断平台执行不同的命令。
以上。
首发于阿里南京技术专刊知乎专栏。
1.18.5 to 1.18.6.This version is covered by your current version range and after updating it in your project the build failed.
nodemon is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 1 commits.
521eb1e fix: restart on change for non-default signals (#1409) (#1430)See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
dependency apollo-link-http was updated from 1.5.14 to 1.5.15.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the apollo-link group definition.
apollo-link is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
0.4.14 to 0.4.15.This version is covered by your current version range and after updating it in your project the build failed.
fork-ts-checker-webpack-plugin is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 1 commits.
97c86d6 [Feature][#67] Adds tslint autofix as a flag to ForkTsCheckerWebpackPlugin plugin (#174)See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
dependency apollo-link-http was updated from 1.5.14 to 1.5.15.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the apollo-link group definition.
apollo-link is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
7.1.3 to 7.1.4.This version is covered by your current version range and after updating it in your project the build failed.
glob is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 5 commits.
2da9af3 7.1.428c2237 Add logo to license92923a6 website link17cf014 png vs svg0af8a58 adding the globbySee the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
dependency apollo-cache-inmemory was updated from 1.5.1 to 1.6.0.dependency apollo-client was updated from 2.5.1 to 2.6.0.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the apollo-client group definition.
apollo-client is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
The new version differs by 369 commits.
6838c5b chore: Publish7eaf413 Merge pull request #4586 from apollographql/release-2.6.0136ce43 Revert "Temporarily publish to npm using the beta tag."6c348e9 Update CHANGELOG.md with final 2.6.0 changes and package versions.b64b4e9 chore: Publishbcd3aff Preserve cache-and-network fetchPolicy when refetching. (#4840)b78bb88 Add a regression test for issue #4841.1268057 Merge branch 'master' into release-2.6.000261df Run all QueryManager tests (#4842)e5c9e9b chore(deps): update dependency gatsby to v2.5.5 (#4836)fac993f chore(deps): update dependency tsc-watch to v2.2.1 (#4832)0cd2b95 chore(deps): update dependency lint-staged to v8.1.7 (#4828)247251a chore(deps): update dependency rollup to v1.12.3 (#4830)b90acce chore(deps): update dependency prettier to v1.17.1 (#4829)bf7b226 chore(deps): update dependency codecov to v3.5.0 (#4823)There are 250 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
4.4.15 to 4.4.16.This version is covered by your current version range and after updating it in your project the build failed.
@types/webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
dependency apollo-cache-inmemory was updated from 1.5.1 to 1.6.0.dependency apollo-client was updated from 2.5.1 to 2.6.0.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the apollo-client group definition.
apollo-client is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
5.2.2 to 5.2.3.This version is covered by your current version range and after updating it in your project the build failed.
koa-webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
npm audit fixesThe new version differs by 3 commits.
d4881fe chore(release): 5.2.3b46c291 chore: npm audit fix, dependency updates0c0e8bb chore: update dependencies, correct license in package.json (#114)See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
8.1.5 to 8.1.6.This version is covered by your current version range and after updating it in your project the build failed.
lint-staged is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
dependency apollo-link-http was updated from 1.5.14 to 1.5.15.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the apollo-link group definition.
apollo-link is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
2.3.2 to 2.3.3.This version is covered by your current version range and after updating it in your project the build failed.
@types/node-fetch is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
3.2.3 to 3.2.4.This version is covered by your current version range and after updating it in your project the build failed.
@types/koa-compose is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
1.14.3 to 1.15.0.This version is covered by your current version range and after updating it in your project the build failed.
prettier is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
[zh]
自去年 9 月底入职到现在已经有差不多 4 个月了。
从刚开始只接触 UI 上的小调整类需求，到逐步熟悉公司具体业务，期间独立参与完成了用户中心页面改造、镜像清理功能、负载均衡端口详情页、流水线 new k8s 相关调整等多个项目。同时，在项目间隙帮助前端团队优化了项目打包编译配置、推进前端工程化统一编码风格、为开发环境新增模拟服务使开发阶段可以尽量脱离依赖后端服务。
整整四个月的工作让我感觉非常充实，各个项目都在预定时间内正常上线，大部分功能在上 staging 环境尽量做到多自测，功能上线到 CN/IO 环境后没有出现问题。个人技能也在工作中新添了 TypeScript + Angular + Rxjs，虽然还没有成为经验丰富的『老司机』，但我对公司的业务开发已经越来越熟悉。今后，这几项技术还需要继续深入学习。
对于公司的具体业务我还需要更深入地学习和了解，例如 Docker、k8s 等相关技术后续也要学习和利用起来，这不仅能丰富自己的技能树，还能更好地帮助我理解公司业务。
在业余时间，我也在不断地充实自己：学习其他如 GraphQL 等技术，对于自己熟悉的 Vue、React 相关技术栈进一步深入实践，使用 Vue 构建一个 Rubick 应用尝试另一种可能性，将自己在项目的实践的部分业务抽离出 vue-translator, react-translator, react-server-renderer 等开源插件，并在其他项目中实践使用。
就公司贡献来说，我给自己打 3 分，公司安排的任务都是自己分内的事，没有出差错，正常范围；团队贡献来说，我给自己打 4 分，在项目之外我自己主动为前端团队进行了一些优化并提供了一些新想法，帮助促进团队成长；个人成长来说，我给自己打 5 分，这四个月可以说是自己工作以来最充实的一段时间，开始使用 TypeScript 后发现越来越离不开它，Angular 虽然目前还无法爱上，但也越来越熟悉运用，业余时间自己也有很多想法和思路并付诸实践。
总的来说，这四个月我很充实，也很踏实，也希望之后能成为更好的自己。
4.4.13 to 4.4.14.This version is covered by your current version range and after updating it in your project the build failed.
@types/webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
3.1.0 to 3.1.1.This version is covered by your current version range and after updating it in your project the build failed.
vuex is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
The new version differs by 30 commits.
ffc7d00 [release] 3.1.1cf09063 [build] 3.1.1d7c7f98 feat(esm build): build ES modules for browser (#1533)3f87e0a docs(pt-br): Correção de erro de digitação (#1527)13dc501 docs(ja): tweak code example (#1528)0b1ceec docs(zh): updated (#1529)cb9986a fix: Memory leak happening while using registerModule/u… (#1508)b58d3d6 docs: fixed a sentence into bold (#1524)120cec0 Rephrase dumb to silly (#1525)f839fa2 docs: Fix minor errors in README.md (#1523)683579c docs: tweaksd072724 Update edits1d1b2cb7 Updated Edits 1ff6a24 Fix minor errors in README.md0e109e2 fix(types): Make mutation and action payload optional in definition file (#1517)There are 30 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
10.11.0 to 10.11.1.This version is covered by your current version range and after updating it in your project the build failed.
@types/node is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
7.0.2 to 7.1.0.This version is covered by your current version range and after updating it in your project the build failed.
vue-class-component is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
2.5.17 to 2.5.18.This version is covered by your current version range and after updating it in your project the build failed.
vue is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
The new version differs by 164 commits ahead by 164, behind by 4.
dadc918 build: release 2.5.18eb81ec2 build: build 2.5.18dfaf9e2 fix(types): type support for advanced async components (#8438)8a2dbf5 fix(transition-group): fix activeInstance regression0ed0aad fix: fix keyName checking for space and delete in IE11 (#9150)f077ed1 fix(ssr): fix ssr template publicPath generation93850f4 chore: fix sponsor link1b4a8a0 fix(compiler): fix codegen for v-for component inside template448ba65 fix(types): correct scopedSlot types (#9131)0d7fb73 chore: update sponsors/backers [ci skip]e8031b4 build: release v2.5.18-beta.0fe194dd build: build v2.5.18-beta.03078352 fix(ssr): resolve server directives the same as on client (#9129)aca17b4 ci: add regression test for popular libraries in Vue.js ecosystem (#8608)e4b1b57 fix(ssr): adjust call stack size defer thresholdThere are 164 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
14.2.1 to 14.3.0.This version is covered by your current version range and after updating it in your project the build failed.
graphql is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
The new version differs by 37 commits.
4bd1a11 v14.3.0972a150 Update Flow to 0.98.1 (#1852)e90a5ca nyc: Switch config from JSON to YAML and move args from package.json (#1851)d69c533 Add comment to make test better understandable (#1850)9ab5dfb Update deps (#1849)e0fbf90 Remove Flow workaround for const arguments (#1848)ccbbb29 isSpecifiedDirective should not assume Directive type (#1837)d6c973a Adapt benchmark to the new build script (#1845)316e24e Correctly trap errors in shell scripts (#1844)22f0719 Fix "npm run build" on Node 10 (#1843)ec206fc Terminate shell scripts if any subcomand terminated (#1842)c11ccba Make single 'build.js' to handle NPM package build (#1841)1023264 ESLint: enable 'arrow-body-style' rule (#1840)cd80f94 ESLint: enable all low-hanging rules and mark rest as TODO (#1839)ce832ee Mark all ESLint rules that conflict with Prettier (#1838)There are 37 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
dependency apollo-cache-inmemory was updated from 1.5.1 to 1.6.0.dependency apollo-client was updated from 2.5.1 to 2.6.0.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the apollo-client group definition.
apollo-client is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
4.14.123 to 4.14.124.This version is covered by your current version range and after updating it in your project the build failed.
@types/lodash is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
It seems there is no need to use __INITIALIZE_STATE__ together with __APOLLO_STATE__ which has cached all states.
8.1.0 to 8.1.1.This version is covered by your current version range and after updating it in your project the build failed.
ts-node is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
15.4.2 to 15.5.0.This version is covered by your current version range and after updating it in your project the build failed.
vue-loader is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
3.1.2 to 3.2.0.This version is covered by your current version range and after updating it in your project the build failed.
webpack-cli is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 124 commits.
6253a73 chore: v.3.2.00c3be76 chore: make tests pass0b6bab3 chore: better defaults78436ff chore: add-on -> scaffold3281372 chore: simplify clean-all scriptb0f4a0f chore: addon -> scaffold82c9ea8 chore: update lockfilesa3fe013 Merge pull request #716 from EvsChen/dist-scaffoldf9bb82d Merge pull request #693 from lakatostamas/feature/find-config-recursively3ec2e9d chore: resolve conflict83602d4 chore: update package lock and scriptsd82b016 Merge pull request #720 from rishabh3112/patch-74d9c847 Merge pull request #723 from eavichay/patch-14b2a127 docs: improve the docs (#722)9ad8c1d See #721There are 124 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.