现代前端开发入门学习指南

Function.prototype.apply是开发任何插件的核心。
使用SPA框架开发的前提是打包与编译，也就是掌握npm和webpack、babel，相当于java的maven和jenkins以及jcp规范之于实现的选择（ASF还是jboss旗下），只不过是早期版本，坑比较多。
npm
npm是javascript的包管理器，使用Node.js开发，所以使用npm的前提是安装Node.js，但是npm和Node.js又是由不同的团队开发，发布频率也不同。Node.js安装实例会在没有全局权限的位置安装一个npm。npm推荐安装一个node版本管理器，windows下推荐nvm https://github.com/coreybutler/nvm-windows/releases。 
npm常用命令
查看nodejs版本 node -v
查看npm版本 npm -v
安装最新版本npm npm install npm@latest -g
npm中央仓库 https://www.npmjs.com/ npm国内镜像 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org   registry设置npm包的中央仓库。
npm环境配置

npm package分两类，全局、本地。maven就没有这一区分，默认本地。一般来说需要cli的比如grunt CLI，安装全局的。
安装包 npm install <package_name> install可以简写i
不带报名时：会安装package.json 中dependencies列出的所有模块。带--production标记或者NODE_ENV环境变量为production是，则不安装devDependencies中的模块。
带包名时：该命令会在当前目录的node_modules（如果不存在，会自动创建）下载包以及依赖的包。如果当前目录下不存在package.json文件，则默认会安装最新版本的包，否则安装语义上(https://docs.npmjs.com/getting-started/semantic-versioning)满足package.json中声明的包的最新版本。包在node_modules中之后，就可以使用require使用了，如下：
// index.js
var lodash = require('lodash');
var output = lodash.without([1, 2, 3], 1);
console.log(output);
然后在cmd下执行node index.js就会输出[2, 3]。
如果没有正确安装lodash的话，就会报下列错误：
module.js:340
throw err;
^
Error: Cannot find module 'lodash'

npm install主要选项参考https://docs.npmjs.com/cli/install。
默认情况下，npm install安装后会将依赖添加到package.json文件的dependencies。如需额外控制，声明如下：
-P, --save-prod: 这是默认选项，添加到dependencies.
-D, --save-dev: 添加到devDependencies.
-O, --save-optional: 添加到optionalDependencies.
--no-save: 不添加到dependencies.
-g全局安装包。

删除本地包
npm uninstall --save lodash
一定要带上--save，他会一并删除package.json中的dependencies。
删除全局包
npm uninstall -g <package>

package.json是管理本地安装的npm包的最佳方式，其完整的结构参考https://docs.npmjs.com/files/package.json。其作用是：
列出依赖的包
build可重复执行
使用语义兼容的规则声明包版本

package.json中的关键属性：
main：模块的主入口，一般是index.js。在其他模块通过require("foo")加载它时，将返回main中导出的对象，该文件要相对于包目录的根。
bin：如果模块需要提供cli，则配置命令名和脚本的对应关系在此处。
scripts:设置在包的不同生命周期阶段执行的脚本。参考https://docs.npmjs.com/misc/scripts
config：设置环境变量。
dependencies：声明运行时依赖。
devDependencies：编译、开发时依赖。

npm run是npm run-script <command> [--silent] [-- <args>...]的简写。用于执行package.json中scripts里定义的任何命令。如果没有command，则列出所有命令。npm run可以支持所有内置的npm start, npm test等，后者可以说是快捷方式。

npm init用于创建package.json
通常管理package.json中依赖的最好方式是使用npm install的-P或-D选项。
"devDependencies" : {
"my_test_framework": "^3.1.0"
}
上述中的^表示从3.1.0开始的子版本。

模块与包的区别
package是由package.json描述的一个目录或文件。
module是可以被Node.js' require()的任何目录或文件，最简单可以是一个js文件，所以package一般是module，module不一定是package。

npm环境配置
配置的读取优先级是命令行，环境变量（以npm_config_开头，大小写不敏感，命令行选项-分隔单词，环境变量则是_），npmrc（分别是/path/to/my/project/.npmrc，$HOME/.npmrc，$PREFIX/etc/npmrc，/path/to/npm/npmrc）
查看当前配置 npm config ls -l
更改配置(会更改配置文件) npm config set <key> <value> [-g|--global]

webpack
webpack是一个模块打包器，主要将js打包后供浏览器使用。webpack目前主要在用的版本是2.x和3.x，详细参考https://www.npmjs.com/package/webpack。可以使用npm install --save-dev webpack安装，安装后可以使用cli或者api使用。核心功能包括：
*打包 ES Modules, CommonJS, AMD 模块，甚至他们的组合；
*可以创建一个单独的文件或者多个片段，这些文件可以在运行时异步加载；
*依赖在编译时解析，以便减少运行时大小；
*可以在编译时预处理文件，比如TypeScript转JavaScript，图片转Base64等；
*高度模块化的插件系统；

webpack demo打包入门参考https://webpack.js.org/guides/getting-started/
ES2015中标准化了import/export，虽然大部分浏览器不支持，但是webpack原始支持它们。webpack编译时会将它们转换为浏览器支持的语法。webpack还支持其他的模块语法，具体可以参考https://webpack.js.org/api/module-methods/，不过他不会处理其他任何语句，如果使用了 ES2015外的特性，必须通过加载器系统配置编译器比如Babel。

webpack除了内置核心功能外，最厉害的就是他的插件系统了，绝大部分外围功能都是通过外部插件来实现的。
在webpack中，可以通过加载器预处理文件，这样可以将静态资源从js中剥离出来，加载器使用Node.js编写。加载器主要分为文件、JSON、编译、模板、CSS、测试与LINT类、框架（vue、angular）这几大类。
webpack 2开箱即用支持ES2015+, CommonJS, AMD模块。

大部分的实际项目都比较复杂，所以webpack通过配置文件来设置各种规则，这比在命令行中设置各种选项好得多。webpack有很多的选项，其中4个最核心的概念是：
entry:指定了webpack应该用来建立内部依赖树的模块。进入入口点之后，webpack就会找出入口依赖的模块和库。
output:指定输出文件名以及目录。
loaders:加载器使得webpack可以处理js之外的文件。从本质上来说，webpack加载器会将所有类型的文件转换为模块。module.rules用于声明加载器。加载器本身也是一个js模块。
plugins:插件是webpack的核心。webpack本身也是基于插件系统构建的。插件和加载器有一部分重合的功能，但是用途比加载器更加广泛。要使用插件，需要使用require()导入，并将其加入plugins 数组。大部分插件都有自定义选项。
devServer：设置本地HTTP开发服务器。
比如：
在项目中创建一个文件webpack.config.js
const path = require('path');

module.exports = {
entry: './src/index.js',
output: {
filename: '[hash].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
完整的配置可以参考：https://webpack.js.org/configuration/output/
filename中有几个常见的模板会被用于生产：
[hash]
[chunkhash]
[name]
[id]
[query]

运行
npx webpack --config webpack.config.js
输出如下：
D:\webpack-demo>npx webpack --config webpack.config.js
C:\Users\admin\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js
Hash: 5462c58b0b68cf397893
Version: webpack 3.8.1
Time: 670ms
Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
[0] ./src/index.js 303 bytes {0} [built]
[2] (webpack)/buildin/global.js 488 bytes {0} [built]
[3] (webpack)/buildin/module.js 495 bytes {0} [built]
+ 1 hidden module
webpack默认会查找当前目录下的webpack.config.js，也可以通过--config指定其他配置文件，一般生产中会区分dev,test,prod。
实际中，一般不会独立运行webpack命令，而是集成在npm run XX中。如下：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "./src/index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"lodash": "^4.17.4"
}
}

D:\webpack-demo>npm run build

> webpack-demo@1.0.0 build D:\webpack-demo
> webpack

Hash: 5462c58b0b68cf397893
Version: webpack 3.8.1
Time: 666ms
Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
[0] ./src/index.js 303 bytes {0} [built]
[2] (webpack)/buildin/global.js 488 bytes {0} [built]
[3] (webpack)/buildin/module.js 495 bytes {0} [built]
+ 1 hidden module

在webpack之前，通常使用grunt/gulp将图片、字体等从src移动到dist目录，JavaScript 同理。但是webpack会动态打包所有依赖，除了js外，webpack通过加载器可以同样处理其他任何资源。webpack使用正则表达式确定应该查找那个文件以及使用哪个加载器处理。其格式如下：
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
其中Rule.loader是Rule.use: [ { loader } ]的快捷方式，Rule.loaders是Rule.use的别名。一个Rule可以分为三部分：条件、结果、子Rules。

内置了对json文件加载器的支持。
webpack支持配置文件使用TypeScript、CoffeeScript、JSX和Babel编写。
默认情况下，webpack打包输出的文件名是不会自动更新到index.html的，这样就会导致无法使用hash名，为了解决这个问题，HtmlWebpackPlugin就出现了。HtmlWebpackPlugin默认会生成自己的index.html，即使dist目录下已经存在了，所有选项参见https://github.com/jantimon/html-webpack-plugin。
webpack-dev-server是一个简单的web服务器，可以热加载变更，其所有配置可参考https://webpack.js.org/configuration/dev-server/。

一般来说，应该对开发和生产使用不同的webpack配置文件。
webpack与node.js模块的差异在于，webpack可以通过下列任何方式描述模块依赖关系：
ES2015 import
CommonJS require()
AMD define和require
css/sass/less文件中的@import语句
样式表中的图片url

webpack支持的模块类型（已经有对应的loader）包括：
CoffeeScript
TypeScript
ESNext (Babel)
Sass
Less
Stylus

webpack从resolve.modules环境变量或者初始化参数中指定的所有目录搜索模块。

vue,react,angularjs的选择就像是j2ee标准实现,spring,struts之间的选择

因为不使用jquery了，自然要有一个替代ajax请求的库，不至于使用原生的XMLHttpRequest，所以最常见的就是axios了，在vue里面，早期是vue-resource，不过已经不维护了。

参考：axios在ie下的兼容性问题 vue webpack es6-promise

参考：2018 web前端应该学什么 https://zhuanlan.zhihu.com/p/32193591
参考：axios，https://segmentfault.com/a/1190000008470355?utm_source=tuicool&utm_medium=referral，https://www.npmjs.com/package/axios

vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。https://vuex.vuejs.org/zh-cn/intro.html

vue-router：https://router.vuejs.org/zh-cn/

element ui：

mint ui：