一、nodejs
1. nodejs默认使用CommonJS进行模块管理,后来支持使用ES6进行模块管理,但需要做配置。
CommonJS 模块使用require()
加载和module.exports
输出,ES6 模块使用import
和export
。
2. nodejs使用npm做包管理工具,就像java里的maven。
3. nodejs使用webpack对各种模块及文件进行打包处理。
二、webpack
Webpack是一个前端资源加载打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定规则生成对应的静态资源。即把模块化的各种文件进行分析编译为可在浏览器上运行的静态文件。所以Webpack也是一个前端构建工具。主要包括处理模块化文件、编译语法及压缩代码。
Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。
Webpack通过名为webpack.config.js的配置文件设置webpack环境。
- 通过配置文件,生成Source Maps,使代码调试更容易。
- 使用webpack构建本地服务器。
- 通过使用不同的loader,webpack有能力调用外部的脚本或工具,实现对不同格式的文件的处理。vue loader为vue文件模板定义及处理工具。
- Babel是一个编译js的平台,可以把最新的ES6,ES7等标准代码及js的拓展语言编译为浏览器可以运行的代码。
- 插件(Plugins)是用来拓展Webpack功能的,它们会在整个构建过程中生效,执行相关的任务。
- Webpack暂时不支持ES modules 格式的包管理,仅支持CommonJS格式的包管理。所以Webpack相关配置文件只能用CommonJS格式即:require();
三、npm
NPM是随同NodeJS一起安装的包管理工具。
1. npm在网上维护一个第三方js包的仓库,并支持包的版本管理。js包的开发者可以把包上传到仓库中;使用者可以下载js包并在本地安装使用。
2.在本地建议一个package.json包管理配置文件,npm命令通过配置文件管理安装到本地js库,以及执行自定义第三方命令。
四、vue.js
1. 整合vuejs 与jquery:nodejs下,vuejs不能直接使用jquery库,需要在配置文件中整合。在vue.config.js下配置如下:开头导入webpack,并配置jquery的plugn插件。
const webpack = require('webpack')
//中间省略n行代码
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
]