Node.js | ECMAScript6 等 | 笔记

引言 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(
`{{hbeSeoContent}}#123;"\n"} %c daylib v{{hbeSeoContent}}#123;VERSION} {{hbeSeoContent}}#123;GIT_HASH} %c https://github.com/yiyungent/daylib {{hbeSeoContent}}#123;"\n"}{{hbeSeoContent}}#123;"\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(
`{{hbeSeoContent}}#123;"\n"} %c daylib v{{hbeSeoContent}}#123;VERSION} {{hbeSeoContent}}#123;GIT_HASH} %c https://github.com/yiyungent/daylib {{hbeSeoContent}}#123;"\n"}{{hbeSeoContent}}#123;"\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"
]
}
PS: npm run dev 生成的 /dist/DayLib.min.js 并不需要重新 build, 一改动源代码, 就会自动重新 complie 成 DayLib.min.js 不过需要刷新, 不会自动热重载 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的区别_c2311156c的博客-CSDN博客_package package-lock package.json 和 package-lock.json 有哪些区别和作用? - 知乎 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文件,该文件记录了上一次安装的具体的版本号,相当于是提供了一个参考,在出现版本兼容性问题的时候,就可以参考这个文件来修改版本号即可。
    如果lock文件中的版本高于package.json, 项目每次 install 都会根据 lock文件 的具体版本去拉取包,但并不会更新package.json中写的版本号 如果lock文件中的版本低于package.json,项目install的时候会下载当前包大版本下的最新小版本,并更新lock 等于的情况,就是下载当前版本号的依赖
参考 感谢帮助!