2018年第33周-javeer对nodejs体会

nodejs和es6

nodejs的语法和es6不同，如模块系统，一个是CommonJS的require、一个是es6的import，写模块也不同。

nodejs的npm

我来理解，nodejs相似与java的jvm，因此执行js时是这样，假设文件server.js

node server.js

而npm，相似与java的maven，项目构建工具，既然是构建工具，就须要配置文件，maven的配置文件是pom.xml，则npm的配置文件时package.json，一个是xml一个是json。
npm初始化package.json文件:

npm init -f

npm安装依赖

全局依赖

如安装经常使用的 Node.js web框架模块 express依赖，这个相似于php须要什么功能时，就安装模块什么同样的。

npm install express -g

全局安装

1. 将安装包放在 /usr/local 下或者你 node 的安装目录。
2. 能够直接在命令行里使用。

本地依赖

npm install express

本地安装

1. 将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），若是没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。
2. 能够经过 require() 来引入本地安装的包。

依赖又有如下区分：

npm install moduleName 命令

1. 安装模块到项目node_modules目录下。
2. 不会将模块依赖写入devDependencies或dependencies 节点。
3. 运行 npm install 初始化项目时不会下载模块。

npm install -g moduleName 命令

1. 安装模块到全局，不会在项目node_modules目录中保存模块包。
2. 不会将模块依赖写入devDependencies或dependencies 节点。
3. 运行 npm install 初始化项目时不会下载模块。

npm install -save moduleName 命令

1. 安装模块到项目node_modules目录下。
2. 会将模块依赖写入dependencies 节点。
3. 运行 npm install 初始化项目时，会将模块下载到项目目录下。
4. 运行npm install --production或者注明NODE_ENV变量值为production时，会自动下载模块到node_modules目录中。

npm install -save-dev moduleName 命令

1. 安装模块到项目node_modules目录下。
2. 会将模块依赖写入devDependencies 节点。
3. 运行 npm install 初始化项目时，会将模块下载到项目目录下。
4. 运行npm install --production或者注明NODE_ENV变量值为production时，不会自动下载模块到node_modules目录中。

总结

devDependencies 节点下的模块是咱们在开发时须要用的，好比项目中使用的 gulp ，压缩css、js的模块。这些模块在咱们的项目部署后是不须要的，因此咱们可使用 -save-dev 的形式安装。像 express 这些模块是项目运行必备的，应该安装在 dependencies 节点下，因此咱们应该使用 -save 的形式安装。

webpack

既然npm相似maven，那么webpack相似什么，虽然很难彻底匹配上java的知识，但也尽可能匹配下，方便理解。
首先先回顾，maven是有三类生命周期（默认（default），清洁（clean）和站点（site）生命周期），咱们经常使用的是默认生命周期，这生命周期包含多个阶段(参考)：

验证（validate） 验证项目是正确的，全部必要的信息可用。
初始化（initialize） 初始化构建状态，例如设置属性或建立目录。
产生来源（generate-sources） 生成包含在编译中的任何源代码。
流程源（process-sources） 处理源代码，例如过滤任何值。
生成资源（generate-resources） 生成包含在包中的资源。
流程资源（process-resources） 将资源复制并处理到目标目录中，准备打包。
编译（compile） 编译项目的源代码。
工艺类（process-classes） 从编译后处理生成的文件，例如对Java类进行字节码加强。
生成测试来源（generate-test-sources） 生成包含在编译中的任何测试源代码。
流程测试来源（process-test-sources） 处理测试源代码，例如过滤任何值。
生成测试资源（generate-test-resources） 建立测试资源。
流程测试资源（process-test-resources） 将资源复制并处理到测试目标目录中。
测试编译（test-compile） 将测试源代码编译到测试目标目录中
流程检验类（process-test-classes） 从测试编译中处理生成的文件，例如对Java类进行字节码加强。对于Maven 2.0.5及以上版本。
测试（test） 使用合适的单元测试框架运行测试。这些测试不该该要求代码被打包或部署。
制备包（prepare-package） 在实际包装以前，执行必要的准备包装的操做。这一般会致使打包的处理版本的包。（Maven 2.1及以上）
打包（package） 采起编译的代码，并以其可分发的格式（如JAR）进行打包。
预集成测试（pre-integration-test） 在执行集成测试以前执行所需的操做。这可能涉及诸如设置所需环境等。
集成测试（integration-test） 若是须要，能够将该包过程并部署到能够运行集成测试的环境中。
整合后的测试（post-integration-test） 执行集成测试后执行所需的操做。这可能包括清理环境。
校验（verify） 运行任何检查以验证包装是否有效并符合质量标准。
安装（install） 将软件包安装到本地存储库中，以做为本地其余项目的依赖关系。
部署（deploy） 在集成或发布环境中完成，将最终软件包复制到远程存储库，以与其余开发人员和项目共享。

每一个阶段都是对应有默认插件去执行的，其中“package”阶段是最常常修改的，如：

<!-- 修改打包的形式-->
<plugin>
    <artifactId>maven-assembly-plugin</artifactId>
    <configuration>
        <descriptor>src/main/assembly/dep.xml</descriptor>
    </configuration>
    <executions>
        <execution>
            <id>create-archive</id>
            <phase>package</phase>
            <goals>
                <goal>single</goal>
            </goals>
        </execution>
    </executions>
</plugin>

记起了maven这些阶段，就很好理解webpack、gulp、grunt，它们就是一套构建阶段的工具，最终呈现出的效果就是打包。既然maven能够自定义阶段的插件，那么nodejs，也能够指定不一样的构建工具。
讲到这里，webpack、gulp、grunt能够类比为maven的阶段，也能够类比为maven、ant、gradle不一样的构建工具。

安装webpack（全局）,注意：webpack 4.X 开始，须要安装 webpack-cli 依赖 ,因此使用这条命令 npm install webpack webpack-cli -g

npm install webpack webpack-cli -g

查看webpack版本

gucci@gucci-PC:~$ webpack -v
4.16.5

脚手架（scaffolding）

如vue脚手架vue-cli，详情参考https://www.npmjs.com/package...
学习webpack时，发现配置文件超多的，再结合vue，那配置就无穷无尽了。从零开始写配置文件就不靠谱了。因此就出现脚手架scaffolding，这跟maven的archetype很像，由于不仅是vue，react也是有脚手架。
安装vue脚手架（全局）

npm install --global vue-cli

查看版本：

gucci@gucci-PC:~$ vue -V
2.9.6

新建项目

gucci@gucci-PC:/mydata/test$ vue init webpack jc-demo-vue-cli

? Project name jc-demo-vue-cli
? Project description A Vue.js project
? Author JevonCode <jevoncode@gmail.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) no

   vue-cli · Generated "jc-demo-vue-cli".

# Project initialization finished!
# ========================

To get started:

  cd jc-demo-vue-cli
  npm install (or if using yarn: yarn)
  npm run lint -- --fix (or for yarn: yarn run lint --fix)
  npm run dev
  
Documentation can be found at https://vuejs-templates.github.io/webpack

安装（下载）依赖

npm install

注：若是npm出现异常，就用cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

总结

会发现，人们说的js技术迭代快，学不过来，但从咱们后端开发人员来看，会发现其不少思想是来源于后端思想。如构建、模块化等思想。计算机先驱Alan Jay Perlis曾说过“若是一种语言不能影响你的编程思路，那就不值得学习。”

A language that doesn't affect the way you think about programming is not worth knowing.

虽然前端不少思想源于后端，但其也是有其思想，也影响后端（我说的是我的学习，而不是技术的发展）。如函数编程，java的lambda等。js最早给我体会就是hack精神，利用现有语法完成其语法不支持的部分。学了ES6，发现根本就“没有规则”，还想说作个笔记记录下，最后发现根本就把整本书抄了下来，看来只能本身记住个大概，而后实际使用时再翻开来仔细看看。