Vue2.0 + Webpack + KOA isomorphism practice, there are a few points to ridicule:

es6

Read the source code to learn ES6 first, then have to learn Babel. Es6 has not been introduced in formal projects, although it is popular and trend to write ES6, but it is not necessary, the purpose is to keep the project in continuous iteration and smooth transition of technology, so that less is less wrong ———— Babel related problems are also saved.

.vue

The most important reason for using.vue files is that I want to use a scheme with the same name as fis, so I don’t want to write a line in js requiring (style.css) so ugly that I finally find that in vscode the js of.vue files does not do syntax check (eslint is used). Have to check data again (still not solved at present).

Vue-loader comes in handy for two things:

  1. scope

  2. You don’t have to manually write CSS/template dependencies

On the second point, I think it brings up a problem to do eslint syntactic checking or formatting CSS/js in HTML in vscode. Formatting is ok so far, but elint syntax checking is not yet resolved.

The extract-text-webpack-plugin has a bug in the Order in output CSS file, which is caused by the introduction of routing.

vue2.0

Vue2.0 preliminary attempt to render on the server, must render in new ways to replace the template, then the problem again, the official example in using the render JSX (similar with JSX react), and write the vue template binding way there’s a difference, also didn’t find the two-way binding solutions, Using one-way data flow seems to be no problem if vuEX is added. Also, I can’t format code. I can’t find any JSX formatting plugins that can be mixed with JS, or plugins like __inline in FIS (suddenly miss Fis).

koa2

Vue2.0 provides an interface to write to the stream to prevent compilation strings from blocking because they are too large

koa.bootcss.com/#context Koa does not support direct calls to the underlying RES for response processing. Avoid using the following Node attributes:

  • res.statusCode

  • res.writeHead()

  • res.write()

  • res.end()

The API provided in koA forbids calling the underlying method to write streams (not completely). I have to find another plan.

webpack

The development experience of VUe2.0 and KOA was good, but the build tool was not easy. After using WebPack for a few weeks, I still didn’t like it. Fis3 was good until now. www.zhihu.com/questio…

fis3

As for why I didn’t continue with FIS3, the main pain points are:

  • Fis build process, easy to understand, process control, but to further found that some process is not reasonable, such as why first single document compilation, such as compression, md5, why not wait until after packaging phase of the last of the output of this compilation, though can be configured to achieve the effect, but this makes fis configuration complexity increases, If you have to, the task-based approach of GULP is more flexible.

  • Fis is not specifically a packaging tool, so WebPack really does it better. Personally, front-end loaders such as SeaJS, Requirejs, or ModJS are useless with packaging solutions.

  • As for ecology not being as good as Webpack, it’s just itching for me. Finally, it depends on how to adapt to user needs and improve development experience.

case

During the development, Windows system was used. When the source code was compiled on the Linux server, VUEX module could not be found. It turned out that Window was case-insensitive, so the compilation passed

Import Vuex from 'Vuex' // Incorrect writing The package name of Vuex is lower case import Vuex from 'Vuex' // correct writingCopy the code

Node Version Selection

Running online is Node V5.12.0 (Stable)

The initial selection was Node V4.4.7 (LTS). Considering that heavily dependent third-party packages need to support NPM 3, and considering the stability of not being too aggressive with the latest 6.x, the latest stable was always chosen

The general idea is not rigorous, because at present it is only used to develop auxiliary functions, and the research on Node is not too deep, so we can only decide this scheme temporarily.

The support of the ES6

Node V5.12.0 (Stable) has some issues with ES6 compatibility such as let const, which needs to be used in strict mode