Node.js | ECMAScript6 等 | 笔记

发表于 更新于 分类于 ， ， ， Waline： 本文字数： 6.7k 阅读时长 ≈ 6 分钟
Node.js | 笔记

引言

Q&A

补充

npm 项目 读取 package.json 的 version 作为项目版本

env.js

env.js
1
2
3
4
5
6
// import packageJson from '../package.json' // 报错
const { version } = require('../package.json')

module.exports = {
  version: version, // process.env.npm_package_version,
}

main.js

使用

main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import "./css/daylib.css";

import DayLib from "./js/daylib.js";
import env from "./env.js";

const VERSION = env.version;
const GIT_HASH = "";
console.log(
  `${"\n"} %c daylib v${VERSION} ${GIT_HASH} %c https://github.com/yiyungent/daylib ${"\n"}${"\n"}`,
  "color: #fff; background: #030307; padding:5px 0;",
  "background: #ff80ab; padding:5px 0;"
);

export default DayLib;

npm 项目: 如何注入库对象

src/js/daylib.js

daylib.js
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
// 导入你需要的
import {
  httpGet,
  httpPost,
  getOffsetTop,
  getOffsetLeft,
  removeElement,
} from "./utils.js";

import { util } from "./utils2.js"

function DayLib() {
  this.util = util;
}

DayLib.prototype = {
  constructor: DayLib,

  // 以下只会出现在 __proto__ 中

  // 你需要暴露的一些方法
  http: {
    get: httpGet,
    post: httpPost
  },

  dom: {
    getOffsetTop: getOffsetTop,
    getOffsetLeft: getOffsetLeft,
    removeElement: removeElement
  },

};

// 最后导出它
export default DayLib;

src/main.js

main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 导入你需要的
import "./css/daylib.css";

// 导入刚导出的主库对象
import DayLib from "./js/daylib.js";
import env from "./env.js";

const VERSION = env.version;
const GIT_HASH = "";
console.log(
  `${"\n"} %c daylib v${VERSION} ${GIT_HASH} %c https://github.com/yiyungent/daylib ${"\n"}${"\n"}`,
  "color: #fff; background: #030307; padding:5px 0;",
  "background: #ff80ab; padding:5px 0;"
);

// 导出它
export default DayLib;

package.json

注意: "main": "dist/DayLib.min.js"

package.json
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
{
  "name": "daylib",
  "version": "0.1.0",
  "description": "JavaScript Library.",
  "main": "dist/DayLib.min.js",
  "scripts": {
    "dev": "webpack serve --open",
    "build": "webpack"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/yiyungent/daylib.git"
  },
  "keywords": [
    "daylib"
  ],
  "author": "yiyun <yiyungent@gmail.com>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/yiyungent/daylib/issues"
  },
  "homepage": "https://github.com/yiyungent/daylib#readme",
  "dependencies": {},
  "devDependencies": {
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

webpack.config.js

webpack.config.js
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
var path = require('path')
const TerserPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

// 目前配置: css, fonts, 小图等会被打包到一个 js 中, js 混淆压缩，去除注释, css不会去除注释

module.exports = {
  mode: 'production',
  entry: './src/main.js',
  output: {
    filename: "DayLib.min.js",
    library: {
        name: 'DayLib',
        type: 'umd',
    },
    // 注意: 直接暴露 .default，这样 在浏览器中 就可以直接使用 DayLib
    // 加上后: DayLib:  ƒ r(){this.util=n}
    // 不加此项，就需要再次 DayLib.default
    // DayLib: Module {__esModule: true, Symbol(Symbol.toStringTag): "Module", default: ƒ r()}
    libraryExport: "default",
    umdNamedDefine: true,
    path: path.resolve(__dirname, "dist"),
    publicPath: '/dist/',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ],
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '/imgs/[name].[ext]?[hash]'
        }
      },
      {
        test: /\.(png|woff|woff2|svg|ttf|eot)(\?.*)?$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 100000,  //这里要足够大这样所有的字体图标都会打包到css中
          }
        }
      }
    ]
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    },
    extensions: ['*', '.js', '.json']
  },
  devServer: {
    contentBase: "./",
  },
  // devtool: '#eval-source-map',
  optimization: {
    minimize: true,
    minimizer: [

      new TerserPlugin({
        terserOptions: {
          format: {
            comments: false,
          },
        },
        extractComments: false,
      }),

      new CssMinimizerPlugin({
        minimizerOptions: {
          preset: [
            'default',
            {
              discardComments: { removeAll: true },
            },
          ],
        },
      }),

    ],
  },
  plugins: [
    
  ]
}

需要注意:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
output: {
    filename: "DayLib.min.js",
    library: {
        name: 'DayLib',
        type: 'umd',
    },
    // 注意: 直接暴露 .default，这样 在浏览器中 就可以直接使用 DayLib
    // 加上后: DayLib:  ƒ r(){this.util=n}
    // 不加此项，就需要再次 DayLib.default
    // DayLib: Module {__esModule: true, Symbol(Symbol.toStringTag): "Module", default: ƒ r()}
    libraryExport: "default",
    umdNamedDefine: true,
    path: path.resolve(__dirname, "dist"),
    publicPath: '/dist/',
    clean: true,
  },

使用: 在页面中使用

1
2
3
4
5
6
7
8
<script src="https://cdn.jsdelivr.net/npm/daylib/dist/daylib.min.js"></script>
<script>
    var daylib = new DayLib();
    // 发送 get 请求
    daylib.http.get("", function() {
        // ...
    })
</script>

使用: 模块管理器

1
npm install daylib --save
1
2
3
4
5
6
7
import DayLib from 'daylib';

const daylib = new DayLib();
// 发送 get 请求
daylib.http.get("", function() {
    // ...
})

package.json 与 package-lock.json 的区别

参考:

package.json: 定义项目中需要依赖的包

package-lock.json: 在 npm install时生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号，模块下载地址。

^ : 放在版本号之前，表示向后兼容依赖

依赖版本有四种

开头的版本会匹配最近的小版本依赖包，比如 ~1.2.3 会匹配所有 1.2.x 版本，但是不包括 1.3.0

^ 开头的版本会匹配最新的次版本依赖包，比如 ^1.2.3 会匹配所有 1.x.x 的包，包括 1.3.0，但是不包括 2.0.0

* 这意味着安装最新版本的依赖包

不带以上前缀的就是下载固定的版本号

项目中引入的包版本号之前经常会加^号，每次在执行npm install之后，下载的包都会发生变化，为了系统的稳定性考虑，每次执行完npm install之后会对应生成package-lock文件，该文件记录了上一次安装的具体的版本号，相当于是提供了一个参考，在出现版本兼容性问题的时候，就可以参考这个文件来修改版本号即可。

  1. 如果lock文件中的版本高于package.json， 项目每次 install 都会根据 lock文件 的具体版本去拉取包，但并不会更新package.json中写的版本号
  2. 如果lock文件中的版本低于package.json，项目install的时候会下载当前包大版本下的最新小版本，并更新lock
  3. 等于的情况，就是下载当前版本号的依赖

参考

感谢帮助！

相关文章