V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Lockroach
V2EX  ›  问与答

babel 怎么打包出不引入其他依赖的 js 文件

  •  
  •   Lockroach · 3 天前 · 633 次点击

    项目有需求要支持 ie6 ,而且是采用后端模板渲染的方式渲染,现在预想的方案是使用 babel 配合 core-js 实现 polyfill 来兼容 ie ,但是打包产物中有很多 require corejs 包的语句,require 进来的文件还嵌套 require 其他文件。这样的话提供给后端模板渲染时需要引入的 js script 就太多了。 有什么方法可以让 babel 和 corejs 直接根据输入的 js 文件将对应的 polyfill 实现的具体代码也打包到产物中而不是使用 require 引入的方式实现 polyfill ?

    19 条回复    2024-12-02 21:45:42 +08:00
    lisongeee
        1
    lisongeee  
       3 天前
    > 需要引入的 js script 就太多了

    你的打包没有合并逻辑?按理说最终的 polyfill 产物只有一个文件,感觉你的配置有问题

    另外其实可以不打包,直接顶部加一行引入 https://polyfill.alicdn.com/polyfill.min.js
    xie919
        2
    xie919  
       3 天前
    现在还有 IE6 啊,好奇甲方干啥的。
    Lockroach
        3
    Lockroach  
    OP
       3 天前 via Android
    @xie919 是我们这的客户端程序,里面应该是 mfc 程序引用了 webview1 ,说是要在继续使用这个客户端程序的前提下重构页面逻辑。测试过这个 webview 应该是 ie6 ,trident 内核的
    Lockroach
        4
    Lockroach  
    OP
       3 天前
    @lisongeee 用 corejs 和 babel 打包出来类似这样
    ```javascript
    "use strict";

    require("core-js/modules/es.symbol.js");
    require("core-js/modules/es.symbol.description.js");
    require("core-js/modules/es.symbol.async-iterator.js");
    require("core-js/modules/es.symbol.has-instance.js");
    require("core-js/modules/es.symbol.is-concat-spreadable.js");
    require("core-js/modules/es.symbol.iterator.js");
    require("core-js/modules/es.symbol.match.js");
    require("core-js/modules/es.symbol.match-all.js");
    require("core-js/modules/es.symbol.replace.js");
    require("core-js/modules/es.symbol.search.js");
    require("core-js/modules/es.symbol.species.js");
    require("core-js/modules/es.symbol.split.js");

    // 实际逻辑
    ```
    里面用到了很多 require ,而且 require 引入的 js 文件里还另外 require 了 internal 的其他包,将这些包全加入到项目比较复杂和麻烦。
    > 另外其实可以不打包,直接顶部加一行引入 https://polyfill.alicdn.com/polyfill.min.js
    这段 polyfill 支持 ie6 吗,如果可以就帮大忙了,具体测试要明天上班才能测试
    ysc3839
        5
    ysc3839  
       3 天前
    @Lockroach head 里面加上 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 试试?
    另外那个不叫 WebView1 ,WebView1 指的是老 Edge 的 WebView ,IE 的叫 WebBrowser 或者 ieframe 。
    li1218040201
        6
    li1218040201  
       3 天前
    babel 是语法转换工具,core-js 是工具库。打包工具应该是 webpack 、rollup 、esbuild 或者其他的,我看应该是打包工具哪里需要配置
    Lockroach
        7
    Lockroach  
    OP
       2 天前
    @li1218040201 我也尝试过使用 webpack 打包,打包出来的产物查看实际文件似乎也有使用到 require 等外部内容引入,比如 JSON 编解码功能测试出来就不成功。
    Lockroach
        8
    Lockroach  
    OP
       2 天前
    @ysc3839 确实是 webbrowser 或者 ieframe 。这行 meta 代码我测试过在本机的客户端程序上运行是可以,但是用户平台是 win7 ,感觉可能会受到系统 ie 版本影响
    Lockroach
        9
    Lockroach  
    OP
       2 天前
    @lisongeee 这个 polyfill 使用 JSON 特性测试也不行,无法检测出 JSON😂。
    lisongeee
        10
    lisongeee  
       2 天前
    你这种情况建议直接代码最顶部加一行 import 'core-js'
    li1218040201
        11
    li1218040201  
       2 天前
    @Lockroach 要看你的打包配置,我用 rollup 试了,默认会打成一个文件。额外指定 external core-js ,才会变成你说的包含 require 的代码
    Lockroach
        12
    Lockroach  
    OP
       2 天前
    @li1218040201 我使用的 webpack 打包配置是这样的
    webpack.config.js
    ```javascript
    const path = require('path');
    const { optimize } = require('webpack');

    module.exports = {
    entry: './src/index.js', // 你的入口文件
    output: {
    filename: 'bundle.js', // 输出文件名
    path: path.resolve(__dirname, 'dist'), // 输出路径
    },
    optimization: {
    // 禁用代码分割,确保所有模块打包到一个文件
    splitChunks: {
    cacheGroups: {
    default: false, // 禁用默认的分割
    },
    },
    },
    target: ['web', 'es5'],
    module: {
    rules: [
    {
    test: /\.js$/, // 匹配所有 JS 文件
    exclude: /node_modules/, // 排除 node_modules
    use: {
    loader: 'babel-loader', // 使用 Babel 转译
    options: {
    presets: [
    [
    '@babel/preset-env',
    {
    targets: '> 0.25%, not dead, ie 6', // 目标浏览器为 IE6
    useBuiltIns: 'entry', // 使用 polyfills
    corejs: 3.39, // 使用 Core-js 版本
    },
    ],
    ],
    plugins: [
    '@babel/plugin-transform-arrow-functions', // 强制转译箭头函数
    ],
    },
    },
    },
    ],
    },
    mode: 'development', // 可选:设置为 production 模式
    // devtool: 'source-map', // 可选:启用 source-map 以便调试
    };

    ```

    .babelrc
    ```
    {
    "presets": [
    [
    "@babel/preset-env",
    {
    "targets": {
    "ie": "6"
    },
    "useBuiltIns": "entry",
    "corejs": 3.39
    }
    ]
    ]
    }
    ```
    li1218040201
        13
    li1218040201  
       2 天前
    @Lockroach 你可以像我这样初始化一个项目,复现你的问题,更直观

    https://codesandbox.io/p/devbox/xhnjzn

    我用你的配置,没出现你说的问题
    Lockroach
        14
    Lockroach  
    OP
       2 天前
    @li1218040201 和你打包出来的产物差不多,在 bundle.js 中出现了 webpack require internal 包路径的问题
    主要是想讲 polyfill 也实现到单文件而不是 require 进来,因为 js 文件是使用到模板渲染中的,不是单纯前端项目
    li1218040201
        15
    li1218040201  
       2 天前
    @Lockroach 抱歉还是没太理解的你的场景。你说的 webpack require internal 是指

    ```

    /***/ }),

    /***/ "./node_modules/core-js/internals/a-callable.js":
    /*!******************************************************!*\
    !*** ./node_modules/core-js/internals/a-callable.js ***!
    \******************************************************/
    /***/ (function(module, __unused_webpack_exports, __webpack_require__) {

    eval("\nvar isCallable = __webpack_require__(/*! ../internals/is-callable */ \"./node_modules/core-js/internals/is-callable.js\");\nvar tryToString = __webpack_require__(/*! ../internals/try-to-string */ \"./node_modules/core-js/internals/try-to-string.js\");\n\nvar $TypeError = TypeError;\n\n// `Assert: IsCallable(argument) is true`\nmodule.exports = function (argument) {\n if (isCallable(argument)) return argument;\n throw new $TypeError(tryToString(argument) + ' is not a function');\n};\n\n\n//# sourceURL=webpack://bundle_js/./node_modules/core-js/internals/a-callable.js?");

    /***/ }),

    ```

    这种吗,这种已经把具体的实现打进来了,比如我贴的代码,它是 "./node_modules/core-js/internals/a-callable.js",具体实现是下面的 `module.exports = function ...` 这段

    这里 `var isCallable = __webpack_require__(/*! ../internals/is-callable */ \"./node_modules/core-js/internals/is-callable.js\")` 看似还在引入别的依赖,其实这个依赖,也已经包含在 `bundle.js` 文件中了。
    Lockroach
        16
    Lockroach  
    OP
       2 天前
    @li1218040201 是这样吗,我之前也试过 webpack 打包成这样然后提供给旧客户端程序渲染访问,但是测试有问题,就认为还是在引用外部包了😂,客户端程序拉不出 debug 工具调试,所以很麻烦。感谢解答🙏
    li1218040201
        17
    li1218040201  
       2 天前
    @Lockroach https://github.com/HuolalaTech/page-spy-web 这个是用于远程调试的,不知道能不能跑在你的客户端,如果可以就能看到错误信息了。
    ysc3839
        18
    ysc3839  
       2 天前 via Android
    @Lockroach Win7 最低也是 IE8
    Lockroach
        19
    Lockroach  
    OP
       2 天前
    @li1218040201 看了下 ie 的文档,可以使用 ie chooser 调试,终于知道一些问题出在哪了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1044 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 19:31 · PVG 03:31 · LAX 11:31 · JFK 14:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.