codemirror这个包太大了,能问下如何排除打包吗?

TheGadfly1996 commented 2 years ago

Question（提问）

设置了externals没有用..去官网也没搜到相关问题😭

hobeas commented 2 years ago

没使用到就不会打包。这是用于编辑器的包，如果你用不到 Markdown 和 JSON 编辑器，把这两个组件文件移除即可。顺便把包从 package.json 和 node_modules 移除，执行 npm uninstall codemirror -S

TheGadfly1996 commented 2 years ago

@hobeas 我就是用到这个编辑器了呀但这个包太大了所以想用cdn引入 webpack有个externals选项可以将某个包排除在外但是设置了没有用..

hobeas commented 2 years ago

我试了下 externals 是有效的

在 vue.config.js 里配置 externals

// vue.config.js
module.exports = {
  configureWebpack: {
    externals: {
      codemirror: 'CodeMirror'
    }
  }
}

注释掉 JsonEditor “导入无声明”的代码

// src/components/JsonEditor/index.vue

import CodeMirror from 'codemirror'
// import 'codemirror/addon/lint/lint.css'
// import 'codemirror/lib/codemirror.css'
// import 'codemirror/theme/rubyblue.css'
// require('script-loader!jsonlint')
// import 'codemirror/mode/javascript/javascript'
// import 'codemirror/addon/lint/lint'
// import 'codemirror/addon/lint/json-lint'

3 public/index.html 使用 CDN

<!DOCTYPE html>
<html>
  <head>
    <title><%= webpackConfig.name %></title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.65.0/addon/lint/lint.min.css" />
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.65.0/codemirror.min.css" />
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.65.0/theme/rubyblue.min.css" />
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.65.0/codemirror.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.65.0/mode/javascript/javascript.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.65.0/addon/lint/lint.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jsonlint/1.6.0/jsonlint.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.65.0/addon/lint/json-lint.min.js"></script>
  </body>
</html>

看下效果吧，功能正常

220129_81905

TheGadfly1996 commented 2 years ago

@hobeas 谢谢您成功了

yuhaoz commented 10 months ago

@hobeas 可以帮忙解惑一下吗？为什么要注释掉 JsonEditor “导入无声明”的代码，不太懂，为什么注释掉后还能运行正常

PanJiaChen / vue-element-admin

codemirror这个包太大了,能问下如何排除打包吗? #3915

Question（提问）