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

    原文作者:黄小数
    原文地址: https://segmentfault.com/a/1190000016066338
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞