zoukankan      html  css  js  c++  java
  • 使用babel进行打包

    概述

    我们有很多打包工具,比如 webpack、rollup等等。但是如果我只想打包一个 js 文件呢?用他们会不会太重度了?其实完全没必要,只使用babel就可以打包了。

    很多小型库都是这样打包的,比如:file-loadercss-loader

    方法

    先安装@babel/core@babel/cli,然后直接在package.jsonscripts里面添加下面内容就行了:

    "build": "babel src -d dist --copy-files"
    

    注意:这里的 --copy-files 表示对于那些 babel 处理不了的文件(比如md、png文件等),直接把它们复制到目标文件夹。

    实例

    比如我有一段代码:

    // loader.js
    import { getOptions } from 'loader-utils';
    
    export default function loader(source) {
      const options = getOptions(this);
    
      source = source.replace(/[name]/g, options.name);
    
      return `export default ${ JSON.stringify(source) }`;
    }
    
    

    打包后就变成了:

    "use strict";
    
    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    exports.default = loader;
    
    var _loaderUtils = require("loader-utils");
    
    function loader(source) {
      const options = (0, _loaderUtils.getOptions)(this);
      source = source.replace(/[name]/g, options.name);
      return `export default ${JSON.stringify(source)}`;
    }
    

    很显然,ES Module 被打包成了 ejs,并且加了一个__esModule: true属性,和我们预想的一样。

    保留 module

    上面打包时的 babel 配置是:

    module.exports = {
      presets: [
        [
          '@babel/preset-env',
          {
            targets: {
              node: "current"
            }
          },
        ],
      ],
    };
    

    如果要保留 module,则配置如下:

    module.exports = {
      presets: [
        [
          '@babel/preset-env',
          {
            targets: {
              node: "current"
            },
            modules: false,
          },
        ],
      ],
    };
    
  • 相关阅读:
    hdu 1704 Rank(floyd传递闭包)
    codeforces 85D. Sum of Medians(线段树or分块)
    hdu 1706 The diameter of graph(folyd计数)
    hdu 4705 Y(树形DP)
    hdu 4123 Bob’s Race(树形DP+rmq)
    hdu 2196 Computer(树形DP)
    hdu 3534 Tree(树形DP)
    hdu 6017 Girls Love 233(dp)
    [HDU5903]Square Distance(DP)
    HDU5878~HDU5891 2016网络赛青岛
  • 原文地址:https://www.cnblogs.com/yangzhou33/p/13766386.html
Copyright © 2011-2022 走看看