发表于 | 分类于

weakMap的特性及应用场景总结：

特性

WeakMap 只接受对象作为键名

1
2
3
4
5
const map = new WeakMap();
map.set(1, 2);
// TypeError: Invalid value used as weak map key
map.set(null, 2);
// TypeError: Invalid value used as weak map key

WeakMap 的键名所引用的对象是弱引用

​ WeakMaps 保持了对键名所引用的对象的弱引用。在计算机程序中弱引用和强应用是相对的，是指不能确保其引用的对象不会被垃圾回收器回收的引用。一个对象若只被弱引用所引用，则被认为是不可访问（或弱可访问）的，并因此可能在任何时刻被回收。

在JavaScript中，一般我们创建的对象，都是强引用；

1
var obj = new Object();

只有当我们手动设置为null时，才会回收obj

如果创建一个弱引用对象：

1
2
// 假设可以这样创建一个
var obj = new WeakObject();
阅读全文 »

发表于 | 分类于

PostCss

​ PostCss是一个样式处理工具，它通过自定义的插件和工具生态体系来重新定义css。这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins， 编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。插件链接

webpack中使用postcss

​ 比如我们使用less来编写css代码，因此文件就是这样的文件 文件名.less了，因此该文件需要依次经过less-loader, postcss-loader css-loader, style-loader编译。因此需要如下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: 'postcss-loader'
          },
          "less-loader"
        ]
      }
    ]
  }
}

运行npm run dev 会报错，因为less需要安装less包支持：

1
npm install less --save-dev
阅读全文 »

发表于 | 分类于

什么是SourceMap?

​ webpack4在项目进行打包后，会将开发中的多个文件代码打包到一个文件中，并且经过压缩，去掉多余的空格，且babel编译化后，最终会用于线上环境，那么这样处理后的代码和源代码会有很大的差别，当有bug的时候，我们只能定位到压缩处理后的代码位置，无法定位到开发环境中的代码，对于开发不好调式，因此sourceMap出现了，它就是为了解决不好调式代码问题。

webpack中的SourceMap

eval

​ eval 会将每一个module模块，执行eval，执行后不会生成sourcemap文件，仅仅是在每一个模块后，增加sourceURL来关联模块处理前后对应的关系。在webpack中配置devtool: ‘eval’

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function(modules) { // webpackBootstrap
  "use strict";
  eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return printMe; });\n\nfunction printMe() {\n  console.log('11111111');\n}\n\n//# sourceURL=webpack:///./js/demo1.js?");

  /***/ "./js/main.js":
  /*!********************!*\
    !*** ./js/main.js ***!
    \********************/
  /*! no exports provided */
  /***/ 
  (function(module, __webpack_exports__, __webpack_require__) {
    "use strict";
    eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _demo1_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./demo1.js */ \"./js/demo1.js\");\n\n\nconsole.log('main.js');\n\n//# sourceURL=webpack:///./js/main.js?");
  })
})

​ 每一个打包后的模块后面都增加了包含sourceURL的注释，sourceURL的值是压缩前存放的代码的位置，这样就通过sourceURL关联了压缩前后的代码。

优点是：打包速度非常快，因为不需要生成sourcemap文件。
缺点是：由于会映射到转换后的代码，而不是映射到原始代码，所以不能正确的显示行数。

阅读全文 »

发表于 | 分类于

.babelrc的基本配置

​ ES6引入了新的语法和API，使我们编写js代码更加得心应手，比如class，let,for…of promise等等这样的，但是这些js新特性只被最新版本的浏览器支持，低版本浏览器并不支持，babel可以把es6代码转换成低版本浏览器能识别的代码。可以理解为 babel是javascript语法的编译器。

Babel编译器

​ 在Babel执行编译的过程中，会从项目的根目录下的 .babelrc文件中读取配置。.babelrc是一个json格式的文件。在.babelrc配置文件中，主要是对预设(presets) 和 插件(plugins) 进行配置。.babelrc配置文件一般为如下：

1
2
3
4
5
6
7
8
9
10
{
    "plugins":[
        ["transform-runtime",{"polyfill":false}]
    ],
    "presets":[
        ["env",{"moudules":false}],
        "stage-2",
        "react"
    ]
}

plugins

​ 该属性是告诉babel要使用那些插件，这些插件可以控制如何转换代码，babel默认只转换新的javascript语法，而不转换新的API，比如Iterator、Promise、Set、Map等，还有Object、数组、字符串原型上新增的方法。因此我们需要使用 babel-polyfill和babel-runtime这样的插件来完成转换。

  • babel-polyfill 的原理是如果当前环境没有实现这些API，它会做兼容处理，向js中原有对象的原型prototype添加，但是这样做但造成一定全局污染
  • babel-runtime是将es6编译成es5去执行，它不会影响全局变量。但我们需要针对每个API做引用，如Promise就需要import Promise from 'babel-runtime/core-js/promise' 但是这样手动加入会很麻烦，因此我们通常使用babel-plugin-transform-runtime 避免手动引入 import的痛苦，并且它还做了公用方法的抽离。比如说我们有100个模块都使用promise，但是promise的polyfill仅仅存在1份。
阅读全文 »

发表于 | 分类于

​ webpack-dev-server是一个使用了express的Http服务器，它的作用主要是为了监听资源文件的改变，该http服务器和client使用了websocket通信协议，只要资源文件发生改变，webpack-dev-server就会实时的进行编译。

contentBase

​ 配置主要指定服务器资源的根目录，如果不手动设置的话，contentBase默认是当前的执行目录，webpack.config.js所有的根目录。

webpack配置代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
const path = require('path');
// 提取css的插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  entry: './js/main.js',
  output: {
    filename: 'bundle.js',
    // 将输出的文件都放在dist目录下
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist'
  },
  mode: 'development',
  module: {
    rules: [
      {
        // 使用正则去匹配要用该loader转换的css文件
        test: /\.css$/,
        loaders: ExtractTextPlugin.extract({
          // 转换 .css文件需要使用的Loader
          use: ['css-loader']
        })
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
      }
    ]
  },
  resolve: {
    // modules: ['plugin', 'js']
  },
  plugins: [
    new ExtractTextPlugin({
      // 从js文件中提取出来的 .css文件的名称
      filename: `main.css`
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, "dist")
  }
};

如上配置完成后，我们再运行 npm run dev, 再在地址栏中 运行 http://localhost:8080/ 后看到bundle.js文件，服务器不再指向项目的根目录，而是dist文件夹，http://localhost:8080/bundle.js 可以访问bundle.js文件内容。

阅读全文 »