Win10 下 Nodejs+Angular2+bootstrap4 开发环境搭建

2024-11-26 技术教程

安装Node.js

1，下载安装包并安装

https://nodejs.org/en/download/

2，查看node和npm的版本信息

node -v

npm -v

3，查看和更新包安装路径

--查看

npm config get prefix

npm config get cache

--更新

npm config set prefix"E:\nodejs-repository\npm_global"

npm config set cache "E:\nodejs-repository\npm_cache"

修改环境变量PATH和NODE_PATH（可选，以分号分割的绝对路径）

--修改PATH,对应项改为：E:\nodejs-repository\npm_global

--新建NODE_PATH，设置值：E:\nodejs-repository\npm_global\node_modules

提示：NODE_PATH是历史遗留下来的一个路径解决方案，通常不应该使用，而应该使用node_modules目录机制。在其他位置找不到指定模块时，Node会去这些路径查找。

附：require命令加载规则

require命令用于加载文件，后缀名默认为.js

var foo = require('foo');

// 等同于

var foo = require('foo.js');

根据参数的不同格式，require命令去不同路径寻找模块文件。

（1）如果参数字符串以“/”开头，则表示加载的是一个位于绝对路径的模块文件。比如，require('/home/marco/foo.js')将加载/home/marco/foo.js。

（2）如果参数字符串以“./”开头，则表示加载的是一个位于相对路径（跟当前执行脚本的位置相比）的模块文件。比如，require('./circle')将加载当前脚本同一目录的circle.js。

（3）如果参数字符串不以“./“或”/“开头，则表示加载的是一个默认提供的核心模块（位于Node的系统安装目录中），或者一个位于各级node_modules目录的已安装模块（全局安装或局部安装）。

举例来说，脚本/home/user/projects/foo.js执行了require('bar.js')命令，Node会依次搜索以下文件。

/usr/local/lib/node/bar.js

/home/user/projects/node_modules/bar.js

/home/user/node_modules/bar.js

/home/node_modules/bar.js

/node_modules/bar.js

这样设计的目的是，使得不同的模块可以将所依赖的模块本地化。

（4）如果参数字符串不以“./“或”/“开头，而且是一个路径，比如require('example-module/path/to/file')，则将先找到example-module的位置，然后再以它为参数，找到后续路径。

（5）如果指定的模块文件没有发现，Node会尝试为文件名添加.js、.json、.node后，再去搜索。.js件会以文本格式的JavaScript脚本文件解析，.json文件会以JSON格式的文本文件解析，.node文件会以编译后的二进制文件解析。

（6）如果想得到require命令加载的确切文件名，使用require.resolve()方法

目录的加载规则

通常，我们会把相关的文件会放在一个目录里面，便于组织。这时，最好为该目录设置一个入口文件，让require方法可以通过这个入口文件，加载整个目录。

在目录中放置一个package.json文件，并且将入口文件写入main字段。下面是一个例子。

// package.json

{

"name" : "some-library",

"main" : "./lib/some-library.js"

}

require发现参数字符串指向一个目录以后，会自动查看该目录的package.json文件，然后加载main字段指定的入口文件。如果package.json文件没有main字段，或者根本就没有package.json文件，则会加载该目录下的index.js文件或index.node文件。

参考链接：http://javascript.ruanyifeng.com/nodejs/module.html

4，设置淘宝镜像

npm config set registry https://registry.npm.taobao.org

5，更新npm

npm install npm@latest -g

还可以通过以下地址获取npm的模块

https://registry.npmjs.org/npm/-/npm-{VERSION}.tgz

提示：npm install 指令会在当前路径下创建node_modules目录，并将下载的包存入到该目录下。

如果当前路径下没有package.json文件，则会下载最新版本的模块。

附：创建package.json文件来管理本地模块

package.json文件中最少要具备以下两个信息：

1，name

全小写、不能有空格，下划线和破折号是允许的。

2,version

格式：x.x.x

例如：

{

"name": "my-awesome-package",

"version": "1.0.0"

}

3，使用npm init来创建package.json文件

该指令会提醒你输入信息，但还可以使用以下命令在不提示的情况下直接创建package.json

npm init --yes

npm init -y

4，使用指令往package.json文件中添加依赖

{

"name": "my_package",

"version": "1.0.0",

"dependencies": {

"my_dep": "^1.0.0"

"devDependencies" : {

"my_test_framework": "^3.1.0"

}

npm install <package_name> --save

npm install <package_name> --save-dev

npm uninstall --save<package_name>

npm uninstall --save-dev <package_name>

5，更新本地包

在package.json所在路径下执行npm update

安装“本机编译插件模块”

有三个最主要的原因使得你应该安装该模块

1，你有一个现成的c++类库想在nodejs应用中使用

2，你有兴趣通过c++来编写一些性能优异的代码

3，运行的时候遇到可怕的“node-gyp”问题并且也不知道发生了什么事的时候

安装node-gyp的依赖环境

1，安装VC++编译环境

安装方式一：使用管理员权限打开cmd，执行以下命令【Windows 下编译 Node 的 C++ 模块】

npm install --global --production windows-build-tools

安装方式二：

1，下载Visual C++ Build Tools（http://landinghub.visualstudio.com/visual-cpp-build-tools），并使用默认选项安装或者下载安装Visual Studio 2015(或者免费的vc++ express)，在安装的过程中选择“Common Tools for Visual C++”安装即可。

注意：win7及以上操作系统需要.NET Framework 4.5.1的支持。

2，安装Python2.7（v3.x.x不支持），并添加到PATH路径下，同时运行以下命令来设置默认的python

npm config set python python2.7

或

npm config set python /path/to/executable/python2.7

使用npm来安装python的过程中，可以使用“--pythond=2.7”来指定版本。

3，启动cmd，执行以下命令

npm config set msvs_version 2015

验证：任意安装以下一个包以测试环境是否正确

bson

bufferutil

kerberos

node-sass

sqlite3

phantomjs

utf-8-validate

安装后可以执行该命令试试：npm install gulp-p_w_picpath

安装node-gyp

执行以下命令完成安装

npm install -g node-gyp

如果系统上安装有多个版本的Python，可以按照以下的方式配置：

--确定要使用的Python版本，执行以下指令设置“--python”变量：

node-gyp --python /path/to/python2.7

--如果node-gyp通过npm的方式调用，那么你可以修改npm的python配置项

npm config set python /path/to/executable/python2.7

手动使用方式(编译本地插件)：

--进入插件跟路径

$cdmy_node_addon

--生成本系统平台的编译配置文件

$node-gypconfigure

--执行编译

$node-gypbuild

安装Angular-cli

1，执行以下指令安装Angular-cli

npm install -g @angular/cli

2，创建Angular应用

ng new my-app

3，进入my-app下，启动应用

ng serve

4，访问

http://localhost:4200

安装ngx-bootstrap（Bootstrap3和Bootstrap4的本地Angular指令）

1，进入项目路径下，执行以下指令安装ngx-bootstrap和bootstrap4

npminstallngx-bootstrap bootstrap@next --save

使用CSS

1，打开项目根路径下的.angular-cli.json文件

在apps配置项下的第一项下找到“styles”配置项，该项配置允许你将外部全局的css样式应用到项目中。

指定bootstrap.min.css的路径，例如：

"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
在“styles”配置项下面的“scripts”配置项中指定bootstrap的js文件
"scripts":[
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
]
注意：修改该文件后你必须重启服务才能生效。

使用SASS
方式一：创建项目的时候指定告知使用sass
ng new my-app --style=scss

方式二：修改已经创建好的项目
1，修改src/styles.css为src/styles.scss
2，修改.angular-cli.json中"styles"配置项和"defaults"配置项：
"styles": [
"styles.scss" <-- rename this from .css to .scss
],
.
.
.
"defaults": {
"styleExt": "scss", <-- set this to default to .scss
"component": {}
}
3，在src下创建一个“_variables.scss”空文件
4，在styles.scss中添加以下内容
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

让ngx-bootstrap知道使用bootstrap4
在src/index.html添加以下标记
<body>

<script>window.__theme = 'bs4';</script>

<app-root> </app-root>
</body>

安装node-sass(如果要使用SASS)

在线安装方式
注意：npm 安装 node-sass 依赖时，会从 github.com 上下载 .node 文件。由于国内网络环境的问题，这个下载时间可能会很长，甚至导致超时失败。
1，设置变量（sass_binary_site）使用淘宝镜像
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
或者添加环境变量
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
或者设置全局镜像源
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/

2，进入项目路径，执行以下指令安装：
npm install node-sass
或

npm install node-sass --msvs_version=2013

下载模块文件本地安装方式
1，下载文件
https://github.com/sass/node-sass/releases
2，安装时候指定变量
npm i node-sass --sass_binary_path=/Users/dsf/Downloads/darwin-x64-48_binding.node

提示：可以先卸载了再装：npm uninstall node-sass

测试环境
1，打开src/app/app.module.ts然后添加以下内容

import { BsDropdownModule} from 'ngx-bootstrap/dropdown';
...

@NgModule({
...
imports: [BsDropdownModule.forRoot(), ... ],
...
})
2，打开src/app/app.component.html然后添加以下内容
<divclass="btn-group"dropdown><buttonid="single-button"type="button"class="btnbtn-primary"dropdownToggle>Buttondropdown<spanclass="caret"></span></button><ul*dropdownMenurole="menu"aria-labelledby="single-button"><lirole="menuitem"><aclass="dropdown-item"href="#">Action</a></li><lirole="menuitem"><aclass="dropdown-item"href="#">Anotheraction</a></li><lirole="menuitem"><aclass="dropdown-item"href="#">Somethingelsehere</a></li><liclass="dividerdropdown-divider"></li><lirole="menuitem"><aclass="dropdown-item"href="#">Separatedlink</a></li></ul></div>
3，运行应用，查看效果
http://localhost:4200

参考地址：http://valor-software.com/ngx-bootstrap/index-bs4.html#/
附：
一：开发工具推荐
1，Visual Studio Code
2，Node.js Tools for Visual Studio is
3，WebStorm
4，sublime

二：常见错误和解决方案
错误有关错误信息解决方法PythonPython 2.7 is not installed or can't be found
Install Python 2.7 and add to PATH
Specifiy --python=2.7 during npm install
npm config set python 2.7 to set default
Inability to find msbuild, Visual Studio, or VC compiler
VC compiler not installed, or environment not properly configured
Install VC++ compiler
Specify --msvs_version=2015 (or other VS version)
npm config set msvs_version 2015 -g
NaN/Node/v8/iojs-related syntax errorsPackage incompatible with current version of Node.js
Upgrade to latest version of package + node.js, and see if issue still exists
Search issues and/or file an issue on package repo
Other syntax errorsIncompatible with compiler version
Upgrade to latest version of package + node.js, and see if issue still exists
Search issues and/or file an issue on package repo
*Missing command or .h fileConfiguration is probably fine, but missing other prerequisites
Upgrade to latest version of package
Check docs, try to install missing prerequisites, ensure they're accessible in PATH
Search for header file or other pre-requisite that's missing, that may provide a clue where it's supposed to come from (e.g. Windows SDK not installed, OpenSSL, etc.)
Search issues and/or file an issue on package repository
MSB4019 errorOlder versions of Visual Studio or C++ Build tools already installed
Add or modify the environment variable VCTargetsPath top point at the C++ build tools path. This should be something like C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\v140 (where 140 corresponds to Visual Studio 2015)
Search issues and/or file an issue on package repo
__pfnDliNotifyHook2 redefinition error
Run npm -g install npm@next