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 <[e-mail]>
? 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，发现根本就“没有规则”，还想说做个笔记记录下，最后发现根本就把整本书抄了下来，看来只能自己记住个大概，然后实际使用时再翻开来仔细看看。