什么是NPM，为什么要用NPM来管理包-不建议-陆发百科知识网

什么是NPM，为什么要用NPM来管理包

佚名- 2023-08-20 17:40:33

本篇文章给大家谈谈什么是NPM，为什么要用NPM来管理包，以及为什么npm不建议用前端包对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。

本文目录

web前端现在好学吗女生可不可以学
现在前端必须掌握nodejs技术吗
在舒适的开发环境中做前端是一种怎样的体验
什么是NPM，为什么要用NPM来管理包

web前端现在好学吗女生可不可以学

在H5大前端时代，web前端开发是比较火爆的编程语言，随着用户对平台前端要求的提高，企业越来越重视web前端开发技术。面对这样的市场需求，有越来越多的小伙伴选择web前端开发技术。

其实学习web前端并不分男女的，小伙伴在学习web前端之前，首先要自测一下，先了解一下自己是否适合学习web前端开发技术，不要因为头脑一热就去花费自己宝贵的时间去学习，要充分考虑好自己是否适合学习前端开发技术，再去做决定。

能不能学web前端开发技术，取决于怎么去学习，学习方法很重要，小伙伴在学习web前端过程中，要不断去探索适合自己的学习方法，最好不要拿别人的学习方法充当自己的，适合别人的学习方法不见得适合你。

1.以用为学

小伙伴无论是男是女，在学习web前端开发技术的过程中，要通过自己在练习web前端开发项目中遇到的问题或通过招聘网站了解企业对web前端开发技术的需求，进行针对性学习，以用为学，才能有效提高自己的学习效率。

2.端正自己的学习态度，养成良好的学习习惯

无论小伙伴学习什么编程语言，端正的学习态度是非常有必要的，如果在学习web前端开发过程中，养成的是三天打鱼两天晒网的坏习惯的话，那注定无法深入学习。因此，小伙伴在学习web前端开发技术知识的过程中，要养成良好的学习习惯，课前要预习，课下要复习。

3.多交流，多敲代码

小伙伴要养成多交流的好习惯，学什么也不能固步自封，多和老师同学进行交流，在交流的过程中学习解决问题的方法，培养自己的编程思维；多练习项目案例，多敲代码可以更好的理解学习web前端开发技术知识点。

最后，学习web前端并不分男女，能不能学好还得看小伙伴选择的web前端培训班是否靠谱，还有最重要的一点就是自己能否找到适合自己的学习方法。尚硅谷web前端培训机构是一家比较靠谱的IT教育培训机构，培训班老师都是具有十年开发经验的技术大牛来指导学员，让小伙伴在学习web前端开发技术知识的同时，积累更多的web前端开发实战经验。

http://www.atguigu.com/html5_video.shtml

现在前端必须掌握nodejs技术吗

打开Boss直聘，看一下。

看一个薪资在20k-30k左右的，是这么要求的：

职位要求:1、本科及以上学历，计算机及相关专业，2年及以上Web前端开发经验；2、良好的软件工程思想，良好的编程能力、编程习惯和文档习惯；3、精通HTML/CSS/JavaScript/DOM/AJAX等Web前端技术，熟练页面架构和布局，有高质量通用组件设计经验优先；4、对主流前端框架有一定研究（Vue/React/Angular），精通Vue优先；5、理解前端产品架构，能从零开始独立设计优秀前端项目；6、对新兴的技术领域、新兴Web标准和Web发展趋势有良好洞察力和极高关注度；7、对交互和视觉的原则和方法有一定程度的了解；8、良好的沟通能力，和产品、后端团队沟通无障碍，有想法，有团队精神，有一定抗压能力。;

可见这些大厂来说，nodejs也只是可选的，不是必须的，你没必要听别人说一定是必须的。那nodejs可以做什么呢。

nodejshttp://nodejs.cn/

Node.js就是运行在服务端的JavaScript。Node.js是一个基于ChromeJavaScript运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行JS的速度非常快，性能非常好。

node主要是做一些业务方面的服务端，还可以做CLI、基于Electron的桌面软件、VSCode及其插件、移动端App与小程序、中间件与基础设施等

所以如果你有能力的话也可以去学，不过还是先学好html，css，js这些基础再说。

关注我，一起学前端。

在舒适的开发环境中做前端是一种怎样的体验

去年一篇《在2016年学JavaScript是一种什么样的体验？》吓坏了很多想要入行新同学和入行很久的老司机，感觉一下子前端世界已经看不懂了，做个页面要那么麻烦？当然如果你只是想要一个简单的静态页面，这么玩儿就是杀鸡用牛刀了。但如果你准备开发一个WebApp，之后会不断的迭代，有一个舒适的开发环境是及其重要的，那么底怎么样的环境才会是舒适愉悦的呢？

比如这样的一个环境：资源依赖可以安装并模块化引用、可以使用很酷的ES6语法、可以使用SASS预处理器写CSS、代码可实时更新而不用一遍遍的手动刷新页面，这样的开发环境你会不会觉得很爽！好，我们这就来配置一个这样的环境！

基础环境

首先，你需要一个Node.js，然后NPM也会随着Node.js一起装上。

什么是NPM？简单的说NPM是用来下载安装Node.js的第三方工具包的一个管理器。当然，现在也可以安装浏览器中使用的包。提到包管理器，就不得不说下Bower，Bower之前一直是前端库管理工具，一开始NPM只能发布和安装Node.js的包，所以Bower盛行一时，随着CommonJS的普及，以及UMD规范的出现，让NPM安装前端浏览器js包成为了可能，随着NPM生态的成熟，Bower也就慢慢被人淡忘了～

Node.js安装完成后，可以执行以下命令验证安装是否成功：

$node-vv6.11.0$npm-v3.10.10

别急，Node.js的部分还没完，国内通过NPM的官方源安装依赖好像很慢，动不动就要等上半天，如何解决？我们可以装一个nrm！nrm是npmregistry管理工具，可以自由切换npmregistry，然后命令行使用时依然是npm，国内有很多npm的镜像，比如淘宝的cnpm，然而很多公司都架设了自己的私库。什么是私库？私库就是只能在公司内网访问，不能发布到npm共享平台的npm包，比如我们大公司私库的registry的名称就是hnpm。不细说了，我们先装一个试试：

$npminstall-gnrm

然后根据官方教程我们先切一个国内的registry，比如大淘宝的：

$nrmusecnpm

然后用NPM随便安装个什么，看看速度如何？是不是很快^_^

等等，Node.js还有。有的开发依赖包是有Node.js版本依赖的，我们知道Node.js不同大版本的功能还是差别很大的，但我们又不会一遍遍的卸载安装吧？感觉好蠢！好吧，我们当然可以装一个nvm，nvm？好像和nrm很像！nvm是Node.js的版本管理工具，可以在多个终端切换和运行不同的Node.js版本，可以到这里参考具体的安装教程。不过nvm在windows下不能使用，没关系，这里还有几个替代工具：nvm-window，gnvm供你选择。

同样，我们执行下命令验证安装成果：

$nvm--version0.33.0

项目初始化

有了上面的工具我们就可以开始创建一个项目了，我们执行以下命令来开始一个项目：

mkdirmy-appcdmy-appnpminit

执行npminit后你会看到你需要输入项目的一些信息，完成后回车确认，然后npm会在根目录下创建一个叫package.json的文件，你之后通过--save或者--save-dev安装的依赖包都会出现在这个文件里。

先不管那么多，我们在根目录下创建一个src目录，然后在src下创建index.js、index.html……，好吧，你可以按照下面的结构新建文件：

.├──package.json└──src├──index.css├──index.html└──index.js

在以下文件中输入代码：

index.js：

varel=document.createElement('div'),text=document.createTextNode('MyApp');el.appendChild(text);document.body.appendChild(el);

index.html：

<!doctypehtml><html><head><metacharset="utf-8"/><title>MyApp</title></head><body></body></html>

我们要想办法让这个页面跑起来，what???就这么简单？，把js引入index.html不就完事儿了嘛？当然没那么简单，我们可是要搞高大上的东西的呢！

哈～跑题了，我们继续。

首先我们要装一个叫webpack的东西，它是一个模块打包器，也就是我们俗称的构建工具，之前的那些Grunt，Gulp也都是构建工具，但是这年头流行webpack了！开个玩笑，webpack的可扩展性和可插件化，以及把任何文件都视为模块的概念得到了前端社区的一致推崇，而且在打包效率和按需分割文件上都是其他几个构建工具无法相比较的，当然webpack的配置太灵活，官方文档写的太太太难看懂，也导致了很多初学者无从下手。

接下来我们就来配下这个神奇的工具吧。

自动构建

我们先安装下webpack：

npminstall--save-devwebpack

然后在根目录下新建一个webpack.config.js文件，输入以下代码：

letpath=require('path');module.exports={entry:{app:path.resolve(__dirname,'src','index.js')},output:{filename:'[name].js',path:path.resolve(__dirname,'dist')}};

但要想在浏览器中访问还得有个本地服务器，好在webpack都帮我们想到了，我们可以装一个webpack-dev-server：

npminstall--save-devwebpack-dev-server

我们在package.json中增加个npmscripts:

"scripts":{"start":"webpack-dev-server--port3003"},

ok！我们执行下npmstart，在浏览器中访问：http://localhost:3003。哎？好像哪里不对！是的，你得告诉webpack，你的bundle(打包后的js)要插入到哪个html模板，前面说过，webpack是插件化的，它把很多功能开放给了第三方来实现，他只是来负责拼装的，好，现在我们需要安装一个html-webpack-plugin插件：

npminstall--save-devhtml-webpack-plugin

修改下webpack-config.js：

letHtmlWebpackPlugin=require('html-webpack-plugin'),path=require('path');module.exports={entry:{...},...plugins:[newHtmlWebpackPlugin({template:path.resolve(__dirname,'src','index.html')})]}

再次执行npmstart，页面可以正常访问了。

但是，这样似乎有点low，我们新增一个文件utils.js，搞点es6语法：

.├──package.json└──src├──index.css├──index.html├──index.js+└──utils+└──utils.js

utils.js:

exportfunctionwordsToSentence(...words){returnwords.join('');}

修改index.js

+import{wordsToSentence}from'./utils/utils';letel=document.createElement('div'),-text=document.createTextNode('MyApp');+text=document.createTextNode(+wordsToSentence('Welcome','to','my','app!')+);el.appendChild(text);document.body.appendChild(el);

刷新页面后好像也没什么异常（你肯定用了chrome吧！），仔细看控制台的source的app.js（你的bundle）的代码片段：

"usestrict";/*harmonyexport(immutable)*/__webpack_exports__["a"]=wordsToSentence;functionwordsToSentence(...words){returnwords.join('');}

值得注意的是，使用ES6时需要考虑那些没有支持ES6的旧浏览器，虽然在chrome或者其他高级浏览器中没有出现问题，但不能保证在其他浏览器中能正常运行。为了万无一失，我们需要将ES6转换为ES5，也就是js代码转换器，这类工具当今世界就属Babel最牛逼了：

npminstall--save-devbabel-loaderbabel-core

稍等，装了Babel还没法用，还得搞个presets：

npminstall--save-devbabel-preset-env

在根目录下新建个.babelrc，输入配置：

{"presets":["env"]}

修改webpack.config.js，增加babel的支持：

...module.exports={...module:{rules:[{test:/\.js$/,loader:'babel-loader',include:path.resolve(__dirname,'src')}]},...};

执行npmstart，找到控制台source下的app.js代码片段：

"usestrict";Object.defineProperty(exports,"__esModule",{value:true});exports.wordsToSentence=wordsToSentence;functionwordsToSentence(){for(var_len=arguments.length,words=Array(_len),_key=0;_key<_len;_key++){words[_key]=arguments[_key];}returnwords.join('');}

已经成功转换成ES5代码。但是，目前ES6Modules是由Babel来转的，你可以对比前后2次的代码片段的模块输出部分。现在，webpack2已经内4置了ES6Modules的转换，据说效率和性能比Babel高！^_^没验证过哦，我们先试试，把Babel的模块转换关了先：

.babelrc

{"presets":[["env",{"modules":false}]]}

执行npmstart再次查看输出后的app.js的代码片段：

-Object.defineProperty(exports,"__esModule",{-value:true-});-exports.wordsToSentence=wordsToSentence;+/*harmonyexport(immutable)*/__webpack_exports__["a"]=wordsToSentence;functionwordsToSentence(){...}

模块输出方式又回到了使用Babel前的代码。

js的环境似乎已经准备就绪，但css还没上场，我们来修改下index.css：

#app{color:#57af09;}

同时将css导入bundle入口，并修改下index.js：

import'./index.css';import{wordsToSentence}from'./utils/utils';letel=document.createElement('div'),...el.id='app';...

有了样式还不行，webpack还需要相应的loader来处理css的模块：

npmi--save-devstyle-loadercss-loader

修改下webpack.config.js：

...module.exports={...module:{rules:[...{test:/\.css$/,loader:['style-loader','css-loader'],include:path.resolve(__dirname,'src')}]},...};

执行npmstart，现在可以看到页面已经有了样式。但是，我们说过，我们希望使用先进的武器：SASS。我们修改下index.css：

$app-color:#57af09;#app{color:$app-color;}

再修改下文件后缀：

.├──package.json└──src-├──index.css+├──index.scss...

修改index.js的入口：

-import'./index.css';+import'./index.scss';

由于文件（模块）类型变了，我们还需要一个SASS的webpackloader:

npminstall--save-devsass-loadernode-sass

再次修改webpack.config.js：

...module.exports={...module:{rules:[...{-test:/\.css$/,+test:/\.scss$/,-loader:['style-loader','css-loader'],+loader:['style-loader','css-loader','sass-loader'],include:path.resolve(__dirname,'src')}]},...};

执行npmstart，webpack编译没有报错，页面显示一切正常！

代码自动更新（热更新）

如果你尝试修改index.scss的样式，你有没注意到一个问题：页面会自动刷新。但有时候我们在开发一个模块，比如dialog，刷新会导致你需要反复的在页面上操作才能看到这个dialog的样式更新。那我们有没有办法不刷新页面又能看到代码的更新呢？

其实很简单，因为webpack-dev-server已经内置了这样的功能，我们只要配置下package.json的npmscripts：

"scripts":{"start":"webpack-dev-server--hot--inline--port3003"},

注意到上面的代码，我们增加了--hot--inline，让开发环境有了热更新的能力。我们重新执行npmstart，然后将你的浏览器和编辑器并排放置，然后反复修改index.scss，你会看到页面不会刷新，但样式在自动的推送更新，这就是传说中的热更新。

结束语

到这里，简单（简陋）的、现代化的前端开发环境已经有了基本的雏形，但是，本篇文章不是webpack的使用指南，也不是ES6的语法教程，尽管如此，还是希望你通过本篇文章感受到前端开发在工程化领域的发展带来的惊喜。

什么是NPM，为什么要用NPM来管理包

会产生冗余问题

前端与后端使用同一套包管理软件可以减少公共部分的耦合，但是会导致不必要的冗余。

比如一个bootstrap包，是不可能被后端使用的。但是如果统一使用npm管理，每次npminstall都会安装bootstrap包，而后端一辈子都用不倒，完全是浪费带宽、存储空间、时间。并且你在运行后端前，每次都安装个bootstrap，你不觉得恶心吗？

运行环境完全不同

前端与后端的运行环境是完全不同的，前端运行于浏览器内（即主要是DOM与BOM环境，相对受限），后端则运行于OS内（有无限的API与可能性）。所以这两种开发环境是完全不同的。不同的开发环境使用同一个包管理文件显然是不合时宜的，也不符合模块化的理念。

开发人员也可能不同

前端与后端通常是不同的开发团队，因些前端关注的是HTML，CSS，DOM，BOM，js的UI库与动作库。而后端关注的是性能，安全，效率，数据，缓存，用户管理。他们可能都会用到gulp/grunt，而后端通常不会用到webpack，wiredep，bootstrap,jQuery这类纯前端的包。所以强行将他们捆绑在一起是没有必要的。

同构包可以分开打包

由于isomorphicjs的流行，同构包也会越来越多。但是其实你会发现，不管如何同构，前后端的运行环境还是不同的。所以同构包的调用环境还是不一样的。前端的包通常需要通过browserify，webpack或者gulp等工具发布成前端可用的包。跟npm包直接通过package.json决定从什么地方接入是不同的。即使npm可以为前端包提供字段供前端接入，也会显得非常混乱。

什么是NPM，为什么要用NPM来管理包的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于为什么npm不建议用前端包、什么是NPM，为什么要用NPM来管理包的信息别忘了在本站进行查找哦。