Node.js | ECMAScript6 等 | 笔记

发表于 2021-12-07 更新于 2022-08-21 分类于前端， JavaScript ， ES6 ， ECMAScript6 本文字数： 71k 阅读时长 ≈ 1:05

Node.js | 笔记

引言 Q&A 补充

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

env.js

// import packageJson from '../package.json' // 报错
const { version } = require('../package.json')

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

main.js 使用

main.js

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

// 导入你需要的
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

// 导入你需要的
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

{
  "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

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: [
    
  ]
}

需要注意:

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,
  },

使用: 在页面中使用

<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

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 等于的情况，就是下载当前版本号的依赖参考感谢帮助！

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

npm 项目: 如何注入库对象

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

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