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(
`${"\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. 等于的情况,就是下载当前版本号的依赖

参考

感谢帮助!