node学习之旅

最新推荐文章于 2021-02-18 18:54:09 发布

appcanLiYunLong

最新推荐文章于 2021-02-18 18:54:09 发布

阅读量216

点赞数

分类专栏： nodejs

本文链接：https://blog.csdn.net/appcanLiYunLong/article/details/88838482

版权

nodejs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.node
//参考网站 nodejs.cn
1).源码下载
通过 uname -a 命令查看到我的Linux系统位数是64位
wget http://cdn.npm.taobao.org/dist/node/v10.15.1/node-v10.15.1.tar.gz

	tar -xvzf node-v10.15.1.tar.gz
	
	/******************************************二进制安装****************************/
		wget http://cdn.npm.taobao.org/dist/node/v10.15.1/node-v10.15.1-linux-x64.tar.xz
		2、下载下来的tar文件上传到服务器并且解压，然后通过建立软连接变为全局；

		1）上传服务器可以是自己任意路径，目前我的放置路径为  cd /app/software/

		2）解压上传（解压后的文件我这边将名字改为了nodejs，这个地方自己随意，只要在建立软连接的时候写正确就可以）

			① tar -xvJf    node-v6.10.0-linux-x64.tar.xz   

			② mv node-v6.10.0-linux-x64  nodejs 

			③确认一下nodejs下bin目录是否有node 和npm文件，如果有执行软连接，如果没有重新下载执行上边步骤；

		3）建立软连接，变为全局

		 

		   ①ln -s /app/software/nodejs/bin/npm /usr/local/bin/ 

		 

		   ②ln -s /usr/local/node/bin/node /usr/local/bin/

		 

		4）最后一步检验nodejs是否已变为全局
	/********************************************二进制安装end****************************/
	
	
	/********************************************源码安装***********************************/
	
	/********************************************源码安装end***********************************/
	
		2.进入
			cd node-v10.15.1
			
			./configure
			make
			make install
	
	
2).安转

3).安装成功
	node -v 
	npm -v
	
4).命令行写代码
	node 回车
	console.log('hello')
5).运行代码文件
	node app.js

2.使用PHPstrom创建项目
命令行输入
npm init 来自动生成package.json

3.安装模块
根目录下会多一个node_modules

npm install jquery

npm install jquery --save //会记录到package.json 中

npm install jquery --save-dev //开发人员记录当前项目使用到的模块

卸载
npm uninstall jquery

4.Express框架
npm install express --save

npmjs.com

http://www.expressjs.com.cn/

5.nidemon 自动根据文件变动重启
npm install -g nodemon //全局安装
nodemon app //启动服务
6.EJS模板引擎

安装
npm install ejs --save-dev

7.webpack
1).创建项目
cd webpack
npm init
//安装 webpack vue vue-loader
npm install webpack vue vue-loader
//警告依赖安装
npm i css-loader vue-template-compiler
//src源码放置的目录
mkdir src
cd src
vi app.vue

		//内容
		<template>
			<div id="text">{{text}}</div>
		</template>

		<script>
			export default {
				data(){
					return {
						text:'longge'
					}
				}
			}
		</script>

		<style>
		#text{
			color:green;
		}
		</style>
		
	//创建口文件
		vi index.js
			
			import Vue from 'vue'

			//导入组件
			import App from './app.vue'
			//声明挂载点
			const root = document.createElement('div');
			//先将挂载点插入到body中
			document.body.appendChild(root);
			//挂载组件
			new Vue({
				render:(h)=> h(App)//h 是Vue里的createApp函数 通过h声明了APP的内容 接下来通过$mount()挂载到一个html节点上
			}).$mount(root);
			
			
	//根目录创建
		vi webpack.conf.js
		
		/**
		 * webpack 是帮我们打包前端资源的
		 * @type {{}}
		 */
		//先声明绝对路径
		const path = require('path');
		module.exports = {
			//入口
			entry: path.join(__dirname,'src/index.js'),
			//出口
			output:{
				filename:'bundle.js',
				path:path.join(__dirname,'dist')
			},
			module:{
				rules:[//因为webpack 不支持.vue后缀的规则 所以在这里加一个规则
					{
						text:/.vue$/,
						loader:'vue-loader'
					}
				]
			}
		};

	//打开package.json
		在scripts节点加入
			"scripts": {
				"build": "webpack --config webpack.conf.js"
			  },

	npm run build
		
		* 出现问题
		ERROR in ./src/app.vue
		Module Error (from ./node_modules/vue-loader/lib/index.js):
		vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
		 @ ./src/index.js 4:0-27 11:19-22

		ERROR in ./src/app.vue?vue&type=style&index=0&lang=css& 16:0
		Module parse failed: Unexpected character '#' (16:0)
		You may need an appropriate loader to handle this file type.
		| 
		| 
		> #text{
		|     color:green;
		| }
		 @ ./src/app.vue 4:0-63
		 @ ./src/index.js

		ERROR in ./src/app.vue?vue&type=template&id=5ef48958& 2:0
		Module parse failed: Unexpected token (2:0)
		You may need an appropriate loader to handle this file type.
		| 
		> <div id="text">{{text}}</div>
		| 
		 @ ./src/app.vue 1:0-82 11:2-8 12:2-17
		 @ ./src/index.js


		//解决方案
		webpack.json.js
			加入
			const VueLoaderPlugin = require('vue-loader/lib/plugin');
			module.exports = {
				//入口
				entry: path.join(__dirname,'src/index.js'),
				//出口
				output:{
					filename:'bundle.js',
					path:path.join(__dirname,'dist')
				},
				module:{
					rules:[//因为webpack 不支持.vue后缀的规则 所以在这里加一个规则
						{
							test:/.vue$/,
							loader:'vue-loader'
						},
						{
							test: /\.css$/,
							use: ["vue-style-loader", "css-loader"]
						}
					]
				},
				plugins: [
					new VueLoaderPlugin()
				]
			};


		//在webpack.json.js中配置静态资源的处理
			npm i style-loader url-loader file-loader
			
			//加载css
				{
					test: /\.css$/,
					use: ["vue-style-loader", "css-loader","style-loader"]
				},
				//加载图片
				{
					test:/\.(gif|jpg|jpeg|png|svg)$/,
					use:[
							{
								loader:"url-loader",
								options:{
									limit:1024,//可以把小的图片转换成base64的
									name:'prev-[name].[ext]'//重新定义文件输出的名字
								}
							}
					]
				}
		//安装stylus css预处理文件
		npm i stylus-loader stylus
		
		遇到各种css引入问题
		use:["vue-style-loader","style-loader", "css-loader"]
		
2).webpack-dev-server
	//先安装
	npm i webpack-dev-server
	
	//使用
	在package.json 中加入 
	
	"dev": "webpack-dev-server --config webpack.conf.js"
	如：
	"scripts": {
		"start": "node ./bin/www",
		"build": "webpack --config webpack.conf.js",
		"dev": "webpack-dev-server --config webpack.conf.js"
	  },
	//在webpack.json.js 配置中加入
		target:'web'
	//安装cross-env来区分开发环境跟生产环境
	npm i cross-env
	
	const isDev  = process.env.NODE_ENV === 'development';
	
	//判断是开发环境就单独加一些配置
	if (isDev) {
		config.devServer = {
			port:8000,
			host:'0.0.0.0',
			overlay:{//让错误直接出现在网页上
				errors:true
			}
		};
	}
	
	//安装html 组件来承载入口展示
	npm i html-webpack-plugin

3.应用开发demo
安装
npm i postcss-loader autoprefixer babel-loader babel-core

根目录创建两个文件

	.babelrc
	    //安装npm i babel-preset-env babel-plugin-transform-vue-jsx

		{
		  "presets": [
			"env"
		  ],
		  "plugins": [
			"transform-vue-jsx" //处理vue里的jsx代码 需要安装
		  ]
		}
		
		//在webpack.conf.js中加入处理jsx的loader
		
			 {
				test:/.jsx$/,
				loader:'babel-loader'
			},
			
			{
                    loader:'postcss-loader',
                    options: {
                        sourceMap:true
                    }
                },
				
			WARN:需要继续安装 npm i babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx
	.postcss.config.js
		/**
		 * 代码的功能
		 * 我们的stylus css文件编译完成后postcss去优化我们的css代码
		 */
		const autoprefixer = require('autoprefixer');
		module.exports = {
			plugins:[
				autoprefixer()//回去自动加浏览器前缀 让浏览器支持css 比如--webkit--
			]
		}

	*遇到jsx无法解析加载
	//解决方案
	npm i babel-loader@7.1.5 -D
	
	//技巧 删除数组元素
	this.todos.splice(this.todos.findIndex(todo => todo.id === id),1);

4.webpack正式环境打包的优化
1).css 单独拿出来
安装
npm i extract-text-webpack-plugin

	修改webpack.conf.js
	const ExtractPlugin = require('extract-text-webpack-plugin');
	
	*遇到问题 chunk.js的错误
	Vue-Webpack-todo\node_modules\webpack\lib\Chunk.js:460

            throw new Error(

            ^
			Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead	
	
	//解决方案
	npm install extract-text-webpack-plugin@next

	使用 
	npm i mini-css-extract-plugin
	替换 extract-text-webpack-plugin

5.单独打包类库文件
config.entry = {
app:path.join(__dirname,‘src/index.js’),
vendor:[‘vue’]
};
//单独打包类库文件配置
config.optimization = {
splitChunks: {
cacheGroups: {
commons: {
name: “vendor”,
chunks: “initial”,
minChunks: 2
}
}
}
};