杂文-学习过程

lcccccccccx
115 阅读7分钟

git

git commit --amend --no-edit
  • 修改最后一次提交的内容： 如果你在最后一次提交后发现有遗漏或错误，你可以使用 --amend 选项来添加、删除或修改文件，将这些修改添加到最后一次提交中。
  • 修改提交消息： 如果你只是想修改最后一次提交的提交消息而不改变提交内容，可以省略 --no-edit 选项，然后 Git 会打开文本编辑器以允许你修改提交消息。
git rebase -i HEAD~n
git rebase --abort
 i  进入
 wq! 保存并退出
git push -f 强制提交

postcss.config.js

module.exports = {
    plugins: {
        'autoprefixer': { browsers: 'last 5 version' }
        //它指定要支持最近的五个浏览器版本。
    }
}

Autoprefixer 是一个用于自动化处理 CSS 样式表的工具，它的主要功能是在编写 CSS 样式时，自动为属性添加适当的浏览器前缀，以确保生成的样式在不同浏览器中都能正确显示和生效。

例如，有些 CSS 属性在不同浏览器中需要不同的前缀，比如 flex 属性，它在不同浏览器中需要的前缀可能是 -webkit-、-moz- 等。

webpack的一些配置

module.exports = {
    entry: "./src/index.js",
    output: {
        path: __dirname + "/build",
        filename: 'index.js',
    },
    devtool: "source-map",
    // 别名配置
    resolve: {
        alias: {
            '@utils': `${__dirname}/src/utils`,
            '@services': `${__dirname}/src/services`,
            '@components': `${__dirname}/src/components`,
            '@env': `${__dirname}/src/env`,
            '@pages': `${__dirname}/src/pages`,
            '@styles': `${__dirname}/src/styles`,
            '@distribute_pc_common': `${__dirname}/src/distribute_pc_common`,
        },
        extensions: ['.js', '.css', '.scss']
    },
    module: {
        rules: [
            {
                test: /.scss$/,
                // use: ['style-loader', 'css-loader', 'sass-loader'],
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'sass-loader', // 转换css
                    }
                ]
            },
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-react',
                        ],
                        plugins: [
                            ["@babel/plugin-proposal-decorators", { "legacy": true }],
                            ["@babel/plugin-proposal-optional-chaining"],
                            ["@babel/plugin-syntax-jsx"],
                        ]
                    }
                }
            }
        ]
    },
    optimization: {
        // 压缩css
        minimizer: [
            new OptimizeCSSAssetsPlugin({
                cssProcessorOptions: {
                    discardComments: { removeAll: true } // 移除注释
                }
            }),
            new UglifyJsPlugin({
                parallel: true,  // 使用多进程并行运行来提高构建速度
                sourceMap: false,
                uglifyOptions: {
                    warnings: false,
                    compress: {
                        unused: true,
                        drop_debugger: true,
                        drop_console: drop_console,
                        // drop_console: true,
                    },
                    output: {
                        comments: false // 去掉注释
                    }
                }
            })
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.ejs',
            title: packageInfo.description,
            filename: "index.html",
            minify: {
                collapseWhitespace: false
            }
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV)
            }
        }),
        new webpack.ProvidePlugin({
            "React": "react",
            "ReactDOM": "react-dom",
        }),
        new MiniCssExtractPlugin({
            filename: 'index.css',
        }),
        new LappPlugin({
            "MODE": process.env.MODE,
            "NODE_ENV": process.env.NODE_ENV
        }), /* 此插件应当在所有编译后被执行的插件之前加载 */
    ],
    devServer: {
        contentBase: './build',
        historyApiFallback: true,
        port: 9000,
        hot: true,
        host: 'local.aiyongtech.com'
    }
}

这段代码是一个基本的Webpack配置文件，用于构建和打包前端项目。让我们逐步解释这个配置文件的主要部分：

  1. Entry 和 Output 配置：

    `entry: "./src/index.js", 
output: { path: __dirname + "/build", filename: 'index.js', },`
    • entry: 指定项目的入口文件为 src/index.js。
    • output: 指定输出文件的路径为 build 目录下的 index.js。

  2. Source Map 配置：

    devtool: "source-map"

    • 使用 Source Map，方便调试，将源代码映射到打包后的代码。

  3. Resolve 配置：

    resolve: { alias: { ... }

    extensions: ['.js', '.css', '.scss'] }

    • alias: 为一些常用的路径创建别名，方便在代码中引用。
    • extensions: 指定文件扩展名，方便在 import 语句中省略文件后缀。

  4. Module 配置：

    module: { rules: [ ... ] },

    • 定义一些加载模块的规则，如处理 SCSS 文件、使用 Babel 转译 JavaScript。

  5. Optimization 配置：

    optimization: { ... }

    • 对输出进行优化，包括压缩 CSS（OptimizeCSSAssetsPlugin）和压缩 JavaScript（UglifyJsPlugin）。

  6. Plugins 配置：

    plugins: [ ... ]

    • 配置一些Webpack插件，如清除构建目录 (CleanWebpackPlugin)、生成 HTML 文件 (HtmlWebpackPlugin)、提取 CSS 文件 (MiniCssExtractPlugin)、定义全局变量 (DefinePlugin) 等。

  7. DevServer 配置：

    `devServer: { ... }``

    • 配置Webpack Dev Server，用于本地开发调试。包括设置内容目录、使用历史 API 回退、端口、热模块替换等。

  8. LappPlugin 插件

    - 自定义的Webpack插件，根据环境变量设置一些参数。

  9. Externals

    • 一个对象，配置需要从外部 CDN 引入的 JavaScript 包，以减小构建输出的文件大小。这里配置了将 react 和 react-dom 作为外部依赖引入。

  10. Dll：

    • 一个数组，表示是否启动 DllPlugin。DllPlugin 可以将一些不经常变动的库（如第三方库）单独打包，提高构建速度。

git子模块的知识

Git 子模块是一种允许你将一个 Git 仓库作为另一个 Git 仓库的子目录的方式。这允许你将另一个仓库整个复制到你的项目中，并保持独立的版本历史。以下是关于 Git 子模块的一些基本概念和操作：

  1. 添加子模块：

    • 使用 git submodule add 命令可以将一个仓库添加为你当前仓库的子模块。例如：

      git submodule add https://github.com/example/repo.git path/to/submodule

    • 这将在指定路径下添加一个子模块，并且会拉取子模块的代码。

  2. 初始化和更新子模块：

    • 初次克隆包含子模块的仓库时，需要运行以下命令来初始化和更新子模块：

      git submodule update --init --recursive

      这会初始化子模块并拉取它们的内容。

  3. 拉取主仓库和子模块的更新：

    • 在主仓库中拉取子模块的最新更改可以使用：

      git submodule update --recursive --remote

      这会拉取主仓库和所有子模块的最新更改。

  4. 提交子模块更改：

    • 如果你对子模块进行了更改（例如切换到了不同的提交），你需要在主仓库中提交这些更改。这需要两步：

      git add path/to/submodule git commit -m "Updated submodule to latest commit"

  5. 克隆包含子模块的仓库：

    • 如果其他人克隆了包含子模块的仓库，他们需要运行以下命令来初始化和更新子模块：

      git submodule update --init --recursive

  6. 删除子模块：

    • 如果你想要移除一个子模块，需要执行以下步骤：

      git submodule deinit -f path/to/submodule git rm -f path/to/submodule rm -rf .git/modules/path/to/submodule

      这将从仓库中删除子模块的相关信息。

关于灰度环境的一些了解

灰度环境（Gray Environment）是一种将新功能、新版本或实验性功能逐步推送给用户的方法。灰度环境的目标是在不影响所有用户的情况下，验证新功能的稳定性、性能和用户体验。

以下是搭建前端灰度环境的一般步骤和原理：

步骤：

  1. 服务器环境准备：

    • 首先，需要有多个相似的服务器环境，其中一个环境用于正式生产，另一个或多个用于灰度测试。

  2. 代码部署：

    • 将新版本或实验性功能的代码部署到灰度环境的服务器上。

  3. 用户分流：

    • 将一部分用户引流到灰度环境，可以通过负载均衡、代理服务器、DNS 解析等方式实现。

  4. 监控和收集反馈：

    • 在灰度环境中开启详细的监控和日志记录，以收集用户行为、性能数据和错误信息。

  5. 渐进式推送：

    • 逐步增加流量进入灰度环境，观察新功能的表现。可以根据监控数据决定是否进一步扩大流量。

  6. 反馈和修复：

    • 根据用户反馈和监控数据，修复潜在的问题和优化性能。

  7. 全量推送：

    • 在灰度环境验证通过后，将新功能推送到生产环境，全面覆盖所有用户。

原理：

  1. 流量分流：

    • 使用负载均衡或代理服务器，将一部分用户的请求导向灰度环境服务器。

  2. Cookie 或用户标识：

    • 使用 Cookie 或其他用户标识手段，将用户分为不同的组，一部分进入灰度环境，一部分继续使用正式环境。

  3. 动态配置：

    • 使用动态配置系统，可以实时调整不同用户组的功能开关，以便在运行时灵活控制功能的开启或关闭。

  4. 监控和日志：

    • 在灰度环境中开启详细的监控和日志记录，包括用户行为、性能数据和错误信息。这些数据用于评估新功能的质量和用户体验。

  5. 逐步扩大流量：

    • 通过逐步增加进入灰度环境的用户流量，可以控制新功能的推送范围，及时发现潜在问题。

  6. 回滚机制：

    • 在推送新功能之前，建立回滚机制。如果在灰度测试中发现了严重问题，可以迅速回滚到之前的版本。

  7. 反馈收集：

    • 主动收集用户反馈，通过用户调查、意见反馈等方式了解用户对新功能的看法，为改进提供依据。

下载node-sass失败解决方法

解决方法一：使用淘宝镜像源（推荐）

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

// 也可以设置系统环境变量的方式。示例
// linux、mac 下
SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass

// window 下
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ && npm insta
avatar
文章
阅读
粉丝