npm & webpack

时间 2019-11-14

标签 npm webpack 繁體版

原文原文链接

npm 全称 node package manager，是 js 的包管理工具，开发人员能够把写好的框架、库发布到 npm 上，使用者在使用时候就可很方便地经过 npm 来下载，只要在 npm官网有的包，就可经过 npm install 包名 下载，包名都是惟一的不会重复css

npm 与 nodejs 共同发布，因此在 nodejs官网下载安装了 nodejs 后就可直接在命令行中使用 npm。经过查看版本检查二者是否安装成功html

由于 npm 的更新频率更快，因此可单独更新 npmnode

npm install npm --global　　//--global为全局安装,可简写为--g

因为个人 nodejs 是用的旧版本，因此致使更新 npm 时出错，去官网下载了最新版 nodejs 后问题解决jquery

package.jsonwebpack

package.json 是包描述文件，存储着包的信息（包名、版本、项目的依赖项），最好每一个项目都要有个 package.json 文件，就像产品说明书web

此文件可本身普通文本更名的方式建立，但通常是 npm 命令建立，在当前目录打开命令行输入 npm init shell

运行此命令后，会以向导的方式填写包的信息，不想填的话可回车略过。也可以使用 npm init --yes 命令直接快速建立，最后根据须要修改建立好的 package.json 文件便可npm

建议执行 npm install 包名 时加上--save，会在 package.json 的 dependencies 属性添加依赖项，保存第三方包的依赖信息json

npm install --save jquery

当依赖包没有的时候，直接执行 npm install 命令，则会根据当前目录的 package.json 文件的 dependencies 里全部依赖项自动所有下载完浏览器

npm 经常使用命令

npm 5 版本以后会自动生成 package-lock.json 文件，而且安装包的时候都会生成或更新这个文件

安装包时也不须要加 --save 参数，会自动保存依赖信息

package-lock.json 这个文件会保存 node_modules 中全部包的信息（版本、下载地址），这样的话从新 npm install 的时候速度会更快，另外一个做用是锁定下载的包的版本号，防止自动升级新版

安装webpack

webpack是模块打包机，把 css、js、less 等打包成一个总的js文件供浏览器使用

webpack 要先进行全局安装

到了 webpack4，命令行相关的内容都移到 webpack-cli，因此还须要安装 webpack-cli，不然会出现以下信息

由于 webpack 是全局安装的，因此 webpack-cli 也要全局安装

以后可查看 webpack 版本

小Demo

准备就绪，开始写小案例一个加法计算器，在F盘新建了个文件夹名为 Demo，进入这个空文件夹shift+右键选择 “在此打开命令行” 或 Powershell 窗口

在当前本身的项目里（这里为 Demo 文件夹）安装局部 webpack

以后Demo文件夹会出现node_modules和package-lock.json

而后使用 npm init 命令初始化一个 package.json ，

以后在Demo下建立两个文件夹（ src与dist ）和一个空的 js 文件（ webpack.config.js ）

src 存放人能够看懂的源代码，具有必定的功能划分如MVC

dist 存放真实上线的代码（减小请求、混淆代码），机器能看懂

webpack.config.js 是 webpack 工具的配置文件，用来将src下的代码打包生成dist下的代码

接下来要配置 webpack.config.js，好像涉及到 nodejs 的内容...... 要学习下

var path = require('path'); module.exports = { //指定入口文件
 entry: { entry: './src/main.js' }, //指定出口文件.打包生成build.js,若是没有dist文件夹会自动建立.最好写绝对路径，否则会报下图中的错误Invalid configuration object
 output: { path: path.join(__dirname,'dist'), filename: 'build.js' }, //模块,指定加载器,可配置各类加载器,这样就不担忧less等文件的编译问题，这里用不到因此没写
 module: {} };

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="n1"> + <input type="text" id="n2">
    <button id="btn">=</button>
    <input type="text" id="result">

<script src="../dist/build.js"></script>
</body>
</html>

main.js

//commonjs方式引入cal对象，因为node的模块做用域，因此必需要导入，以后才能使用这个对象 //var cal = require('./cal.js');

//ES6的模块方式引入
import cal from './cal.js'; //获取按钮
document.getElementById('btn').onclick = function(){ var n1 = document.getElementById('n1').value - 0; var n2 = document.getElementById('n2').value - 0; var sum = cal.add(n1,n2); document.getElementById('result').value = sum; };

cal.js

var cal = { add:function(n1,n2){ return n1 + n2; } }; //commonjs导出方式 //module.exports = cal; //ES6导出方式
export default cal;

最后直接在当前目录使用 webpack 命令便可完成打包

浏览器中效果图，点击等号算出结果

npm源

因为npm官网是国外的，因此使用 npm install 命令下载时可能会很慢，这时可以使用淘宝的npm镜像，至关于将官网的内容复制了一份放在国内。使用方式有三种

❶ 全局安装淘宝的 cnpm，使用 cnpm 就会经过淘宝的服务器下载。以后，用到 npm 的地方改成 cnpm 便可

❷ 若不想安装 cnpm 又想使用淘宝的服务器来下载，每次下载时在后面加上--registry=https://registry.npm.taobao.org 便可，如

❸ 每次手动添加会很麻烦，因此可把这个选项加入配置文件中，以后全部的 npm install 都会默认经过淘宝的服务器下载

查看 npm 配置信息，可以使用命令 npm config list

1. npm 、webpack 、 vue-cli
2. npm webpack vue-cli
3. npm和webpack
4. npm gulp webpack
5. webpack和npm
6. npm + webpack +react
7. npm、webpack、vue-cli
8. npm nrm cnpm webpack webpack-dev-server
9. 安装nodejs、webpack、npm
10. webpack npm node 关系
更多相关文章...
• ionic 安装 - ionic 教程