前端学习笔记(一) 初次摸一摸webpack

在公司做了几个月Java后端开发,但近年来前端技术发展喜人,想学Vue.js+Element-UI+ES6+Webpack这些技术。
这篇当教程看还不合格，很多地方不详细，知识点在官方教程里，这篇只能当我自己的笔记。

目标

学习参照网上开源项目做一个后台管理系统的页面。

学习人

冬冬 2018-06-01开始 每周记录一点点

#《Webpack教程笔记》
npm知识可以学习如下教程
http://javascript.ruanyifeng.com/nodejs/npm.html
https://www.npmjs.com.cn/

##查看npm是否安装成功

npm -v

##设置淘宝NPM镜像,提高下载速度

npm install -g cnpm --registry=https://registry.npm.taobao.org

##新建文件夹webpack_demo,并按住Shift键右击,选择打开命令窗口

##新增package.json文件
npm init用来初始化生成一个新的package.json文件。它会向用户提问一系列问题，如果你觉得不用修改默认配置，一路回车就可以了,加上-y,则跳过提问阶段。

npm init -y

##本地安装webpack 和 webpack-cli

cnpm install --save-dev webpack
cnpm install --save-dev webpack-cli
//上面2个命令简写
cnpm i webpack webpack-cli -D

##新增其他文件如下图,src为源文件夹,dist是目标文件夹

dist/index.html

src/index.js

const greeter = require('./greeter');

document.querySelector("#root").appendChild(greeter());

src/greeter.js

module.exports = function() {
    let greet = document.createElement('div');
    greet.textContent = "Hi www.pigg.vip";
    return greet;
}

package.json

{
  "name": "webpack_demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.10.2",
    "webpack-cli": "^3.0.1"
  }
}

运行命令webpack,dist文件夹里生成main.js

直接打开index.html,出现如下页面

虽然页面运行没问题,但是上面命令行出现了warning,看看啥意思,参考官网
#《ES6教程笔记》
从14年开始在上家公司干活的时候,基本用jQuery,对JavaScript只懂皮毛,一个js文件没有结构,没有模块化,很混乱。哪哪都是function,然后到处调用。我记得在上家公司负责鸟巢项目新增门票页面，js文件一开始有两千多行，后来再怎么优化合并公共方法还是有1500行以上。后来这个js都不敢改，每次改功能都很小心翼翼的，这个只能说明当时我的js水平真的很低级。今年看了公司项目的源码，有很多语法不懂，比如export 与 import，所以重新开始学习js还是很有必要的。对于ES6我目前想学的是模块化，babel的使用，别的新特性等用到的时候参考阮一峰老师的教程就行了。
Babel中文官方地址
##全局安装babel-cli（不推荐）

cnpm i babel-cli -g

##本地安装babel-cli（推荐）

cnpm i babel-cli -D

安装好babel-cli后，node_modules文件夹里会有很多babel的包，包括babel-core

package.json文件如下，添加"build": “babel src -d dist”

{
  "name": "webpack_demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "webpack": "^4.10.2",
    "webpack-cli": "^3.0.1"
  }
}

在src文件夹下放入测试的js文件profile.js

let firstName = '王';
let lastName = '哥';
let year = 2018;

let addNum = function (x, y) {
    return x + y;
};

export {firstName, lastName, year, addNum};

执行命令

npm run build

从图上看，src里的文件都转译好放入dist里了，去dist里看下，居然没有变，还是ES6的代码

看了阮一峰老师的教程后，发现是Babel 的配置文件.babelrc,这个没有配置，这应该第一步就该弄的。

##安装好babel-loader和babel-preset-env插件

cnpm i babel-loader -D
cnpm i babel-preset-env -D

##新建.babelrc文件
第一种方式：新建一个TXT文件，然后重命名为 .babelrc. ,注意前后各有一个点
第二种方式：cmd进入命令行，输入 type nul>.babelrc

.babelrc文件

{
    "presets": ["env"]
}

再次执行命令 npm run build，dist文件夹下的profile.js内容变成转译后ES5的语法了^_

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
var firstName = '王';
var lastName = '哥';
var year = 2018;

var addNum = function addNum(x, y) {
    return x + y;
};

exports.firstName = firstName;
exports.lastName = lastName;
exports.year = year;
exports.addNum = addNum;

这么弄完后，其实我对webpack和babel的理解更加晕了，他们是怎么样的关系？在实际开发中是如何配合使用的呢？下面来重新学习webpack+babel整合。
##重新学习webpack+babel整合
1.babel是用来把大多数浏览器不支持的ES6代码转译成ES5代码
2.webpack是将多个js文件（babel转译过的非ES6的代码）或者图片等打包成一个文件
##1.新增项目文件夹webpack_babel
##2.创建package.json文件

npm init

##3.本地安装webpack 和 webpack-cli

//之前也全局安装了
cnpm i webpack webpack-cli -D

##4.本地安装 babel-loader 和 babel-core

cnpm i babel-loader babel-core -D
//再安装可以转换ES2015的插件
cnpm i babel-preset-env -D

##5.新增 webpack.config.js ， .babelrc 等等文件
src是源文件夹，dist是webpack打包目的文件夹

###index.html

###profile.js

let firstName = '王';
let lastName = '哥';
let year = 2018;

let addNum = function (x, y) {
    return x + y;
};

export {firstName, lastName, year, addNum};

###index.js

import {firstName, lastName, year, addNum} from './profile';

let name = `${firstName} ${lastName}`;
console.log(name);

let greet = document.createElement('div');
greet.textContent = "hello www.pigg.vip";
document.querySelector("#root").appendChild(greet);

###.babelrc

{
    "presets": ["env"]
}

###webpack.config.js

const resolve = require('path').resolve

module.exports = {
  entry: {
    index: './src/index.js'
  },
  output: {
    path: resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/
      }
    ]
  }
}

###package.json

{
  "name": "webpack_babel",
  "version": "1.0.0",
  "description": "good good study",
  "main": "index.js",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":  "webpack --mode development",
    "build":"webpack --mode production"
  },
  "author": "dong.wang",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "detect-indent": "^5.0.0",
    "to-fast-properties": "^2.0.0",
    "trim-right": "^1.0.1",
    "webpack": "^4.10.2",
    "webpack-cli": "^3.0.2"
  }
}

##6.运行打包命令
运行npm run dev命令打包，如果有异常说缺少包，就先安装它

#《Element教程笔记》

##1 安装
###npm安装
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用

cnpm i element-ui -S

##2 快速上手
###引入Element
####完整引入
在 main.js 中写入以下内容：

import Vue from 'vue';//Vue引入在前
import ElementUI from 'element-ui';//element-ui引入在Vue之后
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';//自己的代码引入在最后

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
}); 

####按需引入

n
pm init
cnpm i vue -S
cnpm i element-ui -S
cnpm i webpack -D
cnpm i webpack-cli -D

npm init

cnpm i vue -S

cnpm i element-ui -S

cnpm i webpack -D

cnpm i webpack-cli -D

npm

解决 npm 安装速度慢的问题

npm install --registry=https://registry.npm.taobao.org