Background:

Recently I was in charge of fixing a bug in the company’s technical support center, which used an external plugin CALLED V-MD-Editor. . There is a function of assignment code, the icon icon does not meet the STANDARDS of UI, UI naturally wants to replace the icon with its own design. After some efforts, I found that the ICON ICON is passed through VMdPreview. Use (createCopyCodePlugin()) when using the plug-in. It’s created this way. The code looks like this:

module.exports = function (md) {
   md.renderer.rules.fence = function () {
     var rawCode = fence.apply(void 0.arguments);
-    var button = "\n;
var finalCode = rawCode.replace('<! --beforeend-->', button + "<! --beforeend-->").replace('v-md-pre-wrapper'.'v-md-pre-wrapper copy-code-mode');
     return finalCode;
   };
Copy the code

So I have a brainwave, directly replace our own ICON, effective immediately!! But the next day when my colleague pulled the code, the icon was still the same… Oh!!!!! The code changed in node_modles is invalid. In Mounted, retrieve the DOM element to change the ICON. In Mounted, clicking the ICON does not work on the ICON, but does work on its parent BUTTON. Click events are bound to $nextTick ($nextTick, $nextTick, $nextTick).

function createCopyCodePreview() {
  return {
    install: function install(VMdEditor) {
      if(! VMdEditor.mixins) VMdEditor.mixins = []; VMdEditor.mixins.push({mounted: function mounted() {
          var _this = this;

          this.$nextTick(function () {
            var previewEl = getPreviewEl(_this.$el);
            previewEl.addEventListener('click', _this.handleCopyCodeClick);
          });
        },
        beforeDestroy: function beforeDestroy() {
          var previewEl = getPreviewEl(this.$el);
          previewEl.removeEventListener('click'.this.handleCopyCodeClick);
        },
        methods: {
          handleCopyCodeClick: function handleCopyCodeClick(_ref) {
            var target = _ref.target;

            if (isCopyButton(target)) {
              var codeWrapper = findCodeWrapperEl(target.parentNode);

              if (codeWrapper) {
                var code = codeWrapper.querySelector('code').innerText;
                (0, _copyToClipboard.default)(code);
                this.$emit('copy-code-success', code); }}}}}); }}; }Copy the code

So, we’re back to where we started, so how do we change the code in node_modules correctly? After a baidu, get a good method:

Solution:

Step1: install patch-package by running commands

npm install patch-package –save-dev

Step2: modify the package.json file in the root directory of the project

Add “postinstall”: “patch-package” to scripts in package.json file

(FIG. 1-2)

Step3: Manually modify the source code in the node_modules dependency package

(FIG. 1-3)

Step4 run the NPX patch-package package-name command to create the patch file

Run the NPX patch-package package-name command

After you run this command, a patches folder is automatically created in the root directory of the project, and a package-name+version.patch file is displayed in the folder.

Where package-name refers to the name of the dependency package being modified (not the name of the file being modified)

For example, again in Figure 1-3, I’m modifying a file in one of the many components in the iView /dist/index.js component dependency package. In the package.json file, I have all the dependencies in node_modules

After executing this command, a patches folder is automatically created in the root directory of the project, and a package-name+version.patch file is displayed in the folder, as shown in the figure below:

(FIG. 1-5)

Step5: test whether the patch package is effective

Manually delete the node_modules file in the project and re-run the NPM install command to install the node_modules dependency package. After the installation is successful, check the file in the node_modules dependency package to see if the modified code still exists. If the modified code still exists, the patch file has taken effect. If the modified code does not exist, the patch file has not taken effect. You need to re-read this article to see what went wrong. Step6: if the patch file test in Step5 is successful, the patch file can be pushed to the remote warehouse

This way, the patch file will take effect no matter how many times NPM installs it, whether it’s your own pull code or any other pull code on your team.

Original link: blog.csdn.net/qq_32429257… That’s what you’re trying to do. If there is a better solution to this problem, I hope you can give me some suggestions!