npm + webpack + es6 初体验

时间 2019-11-09

标签 npm webpack es6 体验栏目 JavaScript 繁體版

原文原文链接

准备

下载Node.js和npmcss
一个命令行工具（个人是git bash）。不是必须的，用自带的命令行也能够。html
建立一个文件夹，做为根目录，好比 npm-webpack-es6前端

这时，你将看到一个空文件夹node

开始

命令行打开至根目录webpack
键入 npm init,一路肯定到yes ————————建立一个package.json。git

文件夹如左es6

package.json 内部如左github

安装webpack

安装webpack前，先附上几个经常使用的npm命令web

npm init      这个指令会引导你建立一个package.json，包括版本做者等信息，有助于你发包。后面安装的包的依赖关系也会在package.json里有体现。
npm install     直接执行这个命令，会按照当前目录下的package.json的配置去安装各个依赖的包。
npm install [module]    在当前目录安装这个模块。会去检测该模块是否存在于node_module文件夹中，存在了就不安装了。 
npm install [module] -g    在全局进行模块安装。全局模式下安装的包，会自动注册到系统变量 path里的。
npm install [module] --save-dev    在当前目录下安装这个模块，可是仅在开发时使用。在package的"devDependencies"下，表示仅在开发的时候使用。

有一些包是须要用命令行的，这些须要注册系统变量，所以像supervisor等包，必定要安装在全局。不然就不能用它的命令行指令。
有一些包是在js中使用的，那么这些包安装到当前目录就能够了。
webpack 通常建议全局安一个，当前目录安一个。

咱们刚才已经使用了npm init建立了一个package.json，接下来咱们开始安装webpack。npm

首先在全局安装一个webpack

执行 npm install webpack -g         （已经全局安装webpack 的能够跳过这一步）

而后在当前目录下安装一个webpack

执行 npm install webpack --save

你会发现当前目录下新增了一个文件夹node_module，在里头有着webpack的包

检验下，webpack 安装成功了没

执行  webpack -v

若是webpack安装成功了，就会在命令行打印出webpack的版本和帮助。
若是失败了，检测一下有没有在全局安装webpack。

当你执行到这步，你的文件夹长这个样子

--npm-webpack-es6
        --package.json
        --node_module
            --webpack

package.json长这个样子

{
  "name": "npm-webpack-es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.13.2"
  }
}

使用webpack来组织文件

在直接介绍使用es6模块化语言来组织文件以前，咱们先了解一下webpack的使用。
webpack会将咱们用模块化语言语法写成的源文件，编译成浏览器可识别的文件。也就是有从源文件→线上文件的过程。

咱们来实践一下：

首先在根目录下建立一个文件夹src来放源文件；
再建立一个文件夹dist来放编译后文件；
新建一个html文件来放html文件
最后建立一个webpack.config.js。（先创个空的，待会儿加内容）

这时你的目录结构将以下：

webpack.config.js是webpack的配置文件。
要搞懂webpack其实就是要懂得怎么来配置 webpack.config.js。
本文介绍一个基础的配置，完整的配置教程请参照官网文档——webpack官网文档。

接下来：

在src中新建一个文件—— sourceFile.js

文件内容，随意点：

//sourceFile.js
console.log('我是superman')；

配置 webpack.config.js （关键一步）

module.exports = {
    entry:{
        bundle : __dirname + '/src/sourceFile.js' 
    },
    output:{
        path: __dirname + '/dist',
        filename: '[name].js'
    }
}

这个文件仅有entry和output，应该是最简单的配置文件了。

module.exports 是CommonJS的写法，这个是Node.js的规范
__dirname 表明当前目录,Node.js会去识别
entry中，值为一个路径，表明源文件的存放位置。键，则能够随便取，在个人配置中，编译后文件的名字就是这里的键。
output中，path为编译后的文件存放的文件夹。 filename 为编译后文件夹名字。其中[name]表明了entry中的键。也就是说上面是什么名字，编译后就是什么名字。能够本身试验下。

使用webpack进行编译
```
在命令行键入 webpack -w
```

成功编译的话，命令行的显示

同时在dist中会新出现一个 bundle.js, 代码长这个样子：

/******/ (function(modules) { // webpackBootstrap
/******/     // The module cache
/******/     var installedModules = {};

/******/     // The require function
/******/     function __webpack_require__(moduleId) {

/******/         // Check if module is in cache
/******/         if(installedModules[moduleId])
/******/             return installedModules[moduleId].exports;

/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             exports: {},
/******/             id: moduleId,
/******/             loaded: false
/******/         };

/******/         // Execute the module function
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/         // Flag the module as loaded
/******/         module.loaded = true;

/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }


/******/     // expose the modules object (__webpack_modules__)
/******/     __webpack_require__.m = modules;

/******/     // expose the module cache
/******/     __webpack_require__.c = installedModules;

/******/     // __webpack_public_path__
/******/     __webpack_require__.p = "";

/******/     // Load entry module and return exports
/******/     return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {

    console.log('我是superman');

/***/ }
/******/ ]);

能够看到编译后的js多了不少额外的内容，因此若是项目小的话是不须要模块化的。模块化是用来构建中大型项目的。

来看看效果

在html文件夹下新建一个 test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>看看咱们编译后的js可不能够用</title>
</head>
<body>
    <script src = "../dist/bundle.js"></script>
</body>
</html>

在浏览器打开test.html，你会看到浏览器的console中：

说明咱们将源文件sourceFile.js编译后生成的bundle.js，是能够正常使用的。

疑惑

这样子作的话，和html中直接引用源文件效果是同样的啊。话说为何要编译啊？这样不是更麻烦吗？

这是我刚接触webpack的感觉。后来，我逐步理解了，编译实际上是为了实现模块化。基于AMD/CMD/CommonJS/es6的语法，浏览器是没法识别的。这些规范的语法，你能够感觉一下：

//AMD
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC)
{
    alert('加载成功');
});

//CMD
seajs.use("../static/hello/src/main")

//CommonJS
module.export = {
    name:'rouwan'
}

//es6模块
import {module1, module2} form './module.js';

这些规范使用的语法，浏览器是不能识别的。不信你试一下，立马报错。除非将来几年，浏览器支持es2015的import和export。所以，须要由webpack来编译，编译后的文件，浏览器可以识别。

如今,咱们开始使用es6模块语法来组织模块吧

使用es6模块语法

webpack能够支持es6语法。这个也是为何webpack强大的缘由。用es6a ,想一想就爽。
固然，咱们须要先下载配置babel

下载和配置babel
下载babel：

npm install --save-dev babel-loader babel-core babel-preset-es2015  //下载babel的webpack加载器

下载完了，要去webpack.config.js进行配置，配置完的文件以下：

module.exports = {
    entry:{
        bundle : __dirname + '/src/sourceFile.js'
    },
    output:{
        path: __dirname + '/dist',
        filename: '[name].js'
    },
    module:{
        loaders:[{
            test: /\.js$/,
            loader: 'babel?presets=es2015'
        }]
    }
}

能够看到，和以前的webpack.config.js相比，增长了一个loaders的配置。
大体意思是：全部的js文件，使用babel加载器来翻译一下
具体配置原理可查官网文档 loader的api

怎么看本身是否配置好呢？待会儿webpack编译时看有没有报错，浏览器端有没有识别es6语法就知道了。

开始使用es6模块
在src文件夹下新建一个文件——moduleTest.js

//moduleTest.js
function say(){
    console.log('我引用了一个模块')
}

export {say}

将sourceFile.js的内容改成：

//sourceFile.js
import {say} from './moduleTest.js';
say();

在命令行运行webpack编译指令

webpack -w

若是没有报错，先开心一下。嘿嘿。
别急，先去打开test.html看看，若是你看到了命令行成功打印

那么，恭喜你，这个demo完整地跑完了。

结语

前端工程化是大势所趋，咱们将再也不人工去实现依赖管理，代码压缩混淆，测试，上线等开发流程，转而交由工具去完成。这些工具中，npm做为优秀的包管理工具，节省了咱们在搜索各个库的官网下载库的时间，方便咱们进行包的下载，更新，和依赖管理；webpack做为优秀的模块化构建工具，支持多种模块化规范，并能将css/字体/图片做为模块管理，编译各种js方言，有着丰富的插件，已经超出了一个模块加载器的范围，成为了一款强大的前端构建工具。

本文仅仅介绍了一个最简单的demo，由于我也正在学习中。详细的资料，仍是要去看文档并实践，这里给出几个传送门以便你们详细了解npm/webpack/es6模块的知识。

npm经常使用指令
 webpack官方文档
 阮一峰的ECMA6入门——es6模块