处理 TypeScript

npm i -D webpack webpack-cli typescript

src/index.ts

const enum Animals {
  Fish
}
console.log(Animals.Fish);

setTimeout(() => {
  const message = `我一路向北，离开有你的季节`
  console.log(message)
}, 1000)

ts-loader

npm install --save-dev ts-loader

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    // path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      }
    ]
  },
  resolve: {
    extensions: [ '.ts', '.js'],
  },
}

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

dist/bundle.js

console.log(0),setTimeout((function(){console.log("我一路向北，离开有你的季节")}),1e3);

babel

npm install --save-dev @babel/core @babel/preset-typescript babel-loader

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    // path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-typescript']
            }
          },
        ],
        exclude: /node_modules/
      }
    ]
  }
}

dist/bundle.js

(()=>{var o;!function(o){o[o.Fish=0]="Fish"}(o||(o={})),console.log(o.Fish),setTimeout((()=>{console.log("我一路向北，离开有你的季节")}),1e3)})();

babel-loader + ts-loader

npm install --save-dev @babel/core @babel/preset-env @babel/preset-typescript babel-loader ts-loader
npm install core-js@3 --save

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    // path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    // 指定core-js版本
                    corejs: 3,
                    // 要兼容的浏览器版本
                    targets: {
                      chrome: '60',
                      firefox: '60',
                      ie: '9',
                      safari: '10',
                      edge: '17'
                    },
                    // 按需加载
                    useBuiltIns: 'usage',
                  }
                ]
              ]
            }
          },
          'ts-loader'
        ],
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.ts', '.js'],
  },
}

dist/bundle.js

(()=>{"use strict";var t={9662:(t,r,e)=>{var n=e(614),o=e(6330),i=TypeError;t.exports=function(t){if(n(t))return t;throw new i(o(t)+" is not a function")}},9670:(t,r,e)=>{var n=e(111),o=String,i=TypeError;t.exports=function(t){if(n(t))return t;throw new i(o(t)+" is not an object")}},1318:(t,r,e)=>{var n=e(5656),o=e(1400),i=e(6244),u=function(t){return function(r,e,u){var a,c=n(r),f=i(c),s=o(u,f);if(t&&e!=e){for(;f>s;)if((a=c[s++])!=a)return!0}else for(;f>s;s++)if((t||s in c)&&c[s]===e)return t||s||0;return!t&&-1}};t.exports={includes:u(!0),indexOf:u(!1)}},206:(t,r,e)=>{var n=e(1702);t.exports=n([].slice)},4326:(t,r,e)=>{var n=e(1702),o=n({}.toString),i=n("".slice);t.exports=function(t){return i(o(t),8,-1)}},9920:(t,r,e)=>{var n=e(2597),o=e(3887),i=e(1236),u=e(3070);t.exports=function(t,r,e){for(var a=o(r),c=u.f,f=i.f,s=0;s<a.length;s++){var p=a[s];n(t,p)||e&&n(e,p)||c(t,p,f(r,p))}}},8880:(t,r,e)=>{var n=e(9781),o=e(3070),i=e(9114);t.exports=n?function(t,r,e){return o.f(t,r,i(1,e))}:function(t,r,e){return t[r]=e,t}},9114:t=>{t.exports=function(t,r){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:r}}},8052:(t,r,e)=>{var n=e(614),o=e(3070),i=e(6339),u=e(3072);t.exports=function(t,r,e,a){a||(a={});var c=a.enumerable,f=void 0!==a.name?a.name:r;if(n(e)&&i(e,f,a),a.global)c?t[r]=e:u(r,e);else{try{a.unsafe?t[r]&&(c=!0):delete t[r]}catch(t){}c?t[r]=e:o.f(t,r,{value:e,enumerable:!1,configurable:!a.nonConfigurable,writable:!a.nonWritable})}return t}},3072:(t,r,e)=>{var n=e(7854),o=Object.defineProperty;t.exports=function(t,r){try{o(n,t,{value:r,configurable:!0,writable:!0})}catch(e){n[t]=r}return r}},9781:(t,r,e)=>{var n=e(7293);t.exports=!n((function(){return 7!==Object.defineProperty({},1,{get:function(){return 7}})[1]}))},4154:t=>{var r="object"==typeof document&&document.all,e=void 0===r&&void 0!==r;t.exports={all:r,IS_HTMLDDA:e}},317:(t,r,e)=>{var n=e(7854),o=e(111),i=n.document,u=o(i)&&o(i.createElement);t.exports=function(t){return u?i.createElement(t):{}}},9363:t=>{t.exports="function"==typeof Bun&&Bun&&"string"==typeof Bun.version},8113:t=>{t.exports="undefined"!=typeof navigator&&String(navigator.userAgent)||""},7392:(t,r,e)=>{var n,o,i=e(7854),u=e(8113),a=i.process,c=i.Deno,f=a&&a.versions||c&&c.version,s=f&&f.v8;s&&(o=(n=s.split("."))[0]>0&&n[0]<4?1:+(n[0]+n[1])),!o&&u&&(!(n=u.match(/Edge\/(\d+)/))||n[1]>=74)&&(n=u.match(/Chrome\/(\d+)/))&&(o=+n[1]),t.exports=o},748:t=>{t.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},2109:(t,r,e)=>{var n=e(7854),o=e(1236).f,i=e(8880),u=e(8052),a=e(3072),c=e(9920),f=e(4705);t.exports=function(t,r){var e,s,p,l,v,y=t.target,b=t.global,g=t.stat;if(e=b?n:g?n[y]||a(y,{}):(n[y]||{}).prototype)for(s in r){if(l=r[s],p=t.dontCallGetSet?(v=o(e,s))&&v.value:e[s],!f(b?s:y+(g?".":"#")+s,t.forced)&&void 0!==p){if(typeof l==typeof p)continue;c(l,p)}(t.sham||p&&p.sham)&&i(l,"sham",!0),u(e,s,l,t)}}},7293:t=>{t.exports=function(t){try{return!!t()}catch(t){return!0}}},2104:(t,r,e)=>{var n=e(4374),o=Function.prototype,i=o.apply,u=o.call;t.exports="object"==typeof Reflect&&Reflect.apply||(n?u.bind(i):function(){return u.apply(i,arguments)})},4374:(t,r,e)=>{var n=e(7293);t.exports=!n((function(){var t=function(){}.bind();return"function"!=typeof t||t.hasOwnProperty("prototype")}))},6916:(t,r,e)=>{var n=e(4374),o=Function.prototype.call;t.exports=n?o.bind(o):function(){return o.apply(o,arguments)}},6530:(t,r,e)=>{var n=e(9781),o=e(2597),i=Function.prototype,u=n&&Object.getOwnPropertyDescriptor,a=o(i,"name"),c=a&&"something"===function(){}.name,f=a&&(!n||n&&u(i,"name").configurable);t.exports={EXISTS:a,PROPER:c,CONFIGURABLE:f}},1702:(t,r,e)=>{var n=e(4374),o=Function.prototype,i=o.call,u=n&&o.bind.bind(i,i);t.exports=n?u:function(t){return function(){return i.apply(t,arguments)}}},5005:(t,r,e)=>{var n=e(7854),o=e(614);t.exports=function(t,r){return arguments.length<2?(e=n[t],o(e)?e:void 0):n[t]&&n[t][r];var e}},8173:(t,r,e)=>{var n=e(9662),o=e(8554);t.exports=function(t,r){var e=t[r];return o(e)?void 0:n(e)}},7854:function(t,r,e){var n=function(t){return t&&t.Math===Math&&t};t.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof e.g&&e.g)||function(){return this}()||this||Function("return this")()},2597:(t,r,e)=>{var n=e(1702),o=e(7908),i=n({}.hasOwnProperty);t.exports=Object.hasOwn||function(t,r){return i(o(t),r)}},3501:t=>{t.exports={}},4664:(t,r,e)=>{var n=e(9781),o=e(7293),i=e(317);t.exports=!n&&!o((function(){return 7!==Object.defineProperty(i("div"),"a",{get:function(){return 7}}).a}))},8361:(t,r,e)=>{var n=e(1702),o=e(7293),i=e(4326),u=Object,a=n("".split);t.exports=o((function(){return!u("z").propertyIsEnumerable(0)}))?function(t){return"String"===i(t)?a(t,""):u(t)}:u},2788:(t,r,e)=>{var n=e(1702),o=e(614),i=e(5465),u=n(Function.toString);o(i.inspectSource)||(i.inspectSource=function(t){return u(t)}),t.exports=i.inspectSource},9909:(t,r,e)=>{var n,o,i,u=e(4811),a=e(7854),c=e(111),f=e(8880),s=e(2597),p=e(5465),l=e(6200),v=e(3501),y="Object already initialized",b=a.TypeError,g=a.WeakMap;if(u||p.state){var h=p.state||(p.state=new g);h.get=h.get,h.has=h.has,h.set=h.set,n=function(t,r){if(h.has(t))throw new b(y);return r.facade=t,h.set(t,r),r},o=function(t){return h.get(t)||{}},i=function(t){return h.has(t)}}else{var x=l("state");v[x]=!0,n=function(t,r){if(s(t,x))throw new b(y);return r.facade=t,f(t,x,r),r},o=function(t){return s(t,x)?t[x]:{}},i=function(t){return s(t,x)}}t.exports={set:n,get:o,has:i,enforce:function(t){return i(t)?o(t):n(t,{})},getterFor:function(t){return function(r){var e;if(!c(r)||(e=o(r)).type!==t)throw new b("Incompatible receiver, "+t+" required");return e}}}},614:(t,r,e)=>{var n=e(4154),o=n.all;t.exports=n.IS_HTMLDDA?function(t){return"function"==typeof t||t===o}:function(t){return"function"==typeof t}},4705:(t,r,e)=>{var n=e(7293),o=e(614),i=/#|\.prototype\./,u=function(t,r){var e=c[a(t)];return e===s||e!==f&&(o(r)?n(r):!!r)},a=u.normalize=function(t){return String(t).replace(i,".").toLowerCase()},c=u.data={},f=u.NATIVE="N",s=u.POLYFILL="P";t.exports=u},8554:t=>{t.exports=function(t){return null==t}},111:(t,r,e)=>{var n=e(614),o=e(4154),i=o.all;t.exports=o.IS_HTMLDDA?function(t){return"object"==typeof t?null!==t:n(t)||t===i}:function(t){return"object"==typeof t?null!==t:n(t)}},1913:t=>{t.exports=!1},2190:(t,r,e)=>{var n=e(5005),o=e(614),i=e(7976),u=e(3307),a=Object;t.exports=u?function(t){return"symbol"==typeof t}:function(t){var r=n("Symbol");return o(r)&&i(r.prototype,a(t))}},6244:(t,r,e)=>{var n=e(7466);t.exports=function(t){return n(t.length)}},6339:(t,r,e)=>{var n=e(1702),o=e(7293),i=e(614),u=e(2597),a=e(9781),c=e(6530).CONFIGURABLE,f=e(2788),s=e(9909),p=s.enforce,l=s.get,v=String,y=Object.defineProperty,b=n("".slice),g=n("".replace),h=n([].join),x=a&&!o((function(){return 8!==y((function(){}),"length",{value:8}).length})),m=String(String).split("String"),d=t.exports=function(t,r,e){"Symbol("===b(v(r),0,7)&&(r="["+g(v(r),/^Symbol\(([^)]*)\)/,"$1")+"]"),e&&e.getter&&(r="get "+r),e&&e.setter&&(r="set "+r),(!u(t,"name")||c&&t.name!==r)&&(a?y(t,"name",{value:r,configurable:!0}):t.name=r),x&&e&&u(e,"arity")&&t.length!==e.arity&&y(t,"length",{value:e.arity});try{e&&u(e,"constructor")&&e.constructor?a&&y(t,"prototype",{writable:!1}):t.prototype&&(t.prototype=void 0)}catch(t){}var n=p(t);return u(n,"source")||(n.source=h(m,"string"==typeof r?r:"")),t};Function.prototype.toString=d((function(){return i(this)&&l(this).source||f(this)}),"toString")},4758:t=>{var r=Math.ceil,e=Math.floor;t.exports=Math.trunc||function(t){var n=+t;return(n>0?e:r)(n)}},3070:(t,r,e)=>{var n=e(9781),o=e(4664),i=e(3353),u=e(9670),a=e(4948),c=TypeError,f=Object.defineProperty,s=Object.getOwnPropertyDescriptor,p="enumerable",l="configurable",v="writable";r.f=n?i?function(t,r,e){if(u(t),r=a(r),u(e),"function"==typeof t&&"prototype"===r&&"value"in e&&v in e&&!e[v]){var n=s(t,r);n&&n[v]&&(t[r]=e.value,e={configurable:l in e?e[l]:n[l],enumerable:p in e?e[p]:n[p],writable:!1})}return f(t,r,e)}:f:function(t,r,e){if(u(t),r=a(r),u(e),o)try{return f(t,r,e)}catch(t){}if("get"in e||"set"in e)throw new c("Accessors not supported");return"value"in e&&(t[r]=e.value),t}},1236:(t,r,e)=>{var n=e(9781),o=e(6916),i=e(5296),u=e(9114),a=e(5656),c=e(4948),f=e(2597),s=e(4664),p=Object.getOwnPropertyDescriptor;r.f=n?p:function(t,r){if(t=a(t),r=c(r),s)try{return p(t,r)}catch(t){}if(f(t,r))return u(!o(i.f,t,r),t[r])}},8006:(t,r,e)=>{var n=e(6324),o=e(748).concat("length","prototype");r.f=Object.getOwnPropertyNames||function(t){return n(t,o)}},5181:(t,r)=>{r.f=Object.getOwnPropertySymbols},7976:(t,r,e)=>{var n=e(1702);t.exports=n({}.isPrototypeOf)},6324:(t,r,e)=>{var n=e(1702),o=e(2597),i=e(5656),u=e(1318).indexOf,a=e(3501),c=n([].push);t.exports=function(t,r){var e,n=i(t),f=0,s=[];for(e in n)!o(a,e)&&o(n,e)&&c(s,e);for(;r.length>f;)o(n,e=r[f++])&&(~u(s,e)||c(s,e));return s}},5296:(t,r)=>{var e={}.propertyIsEnumerable,n=Object.getOwnPropertyDescriptor,o=n&&!e.call({1:2},1);r.f=o?function(t){var r=n(this,t);return!!r&&r.enumerable}:e},2140:(t,r,e)=>{var n=e(6916),o=e(614),i=e(111),u=TypeError;t.exports=function(t,r){var e,a;if("string"===r&&o(e=t.toString)&&!i(a=n(e,t)))return a;if(o(e=t.valueOf)&&!i(a=n(e,t)))return a;if("string"!==r&&o(e=t.toString)&&!i(a=n(e,t)))return a;throw new u("Can't convert object to primitive value")}},3887:(t,r,e)=>{var n=e(5005),o=e(1702),i=e(8006),u=e(5181),a=e(9670),c=o([].concat);t.exports=n("Reflect","ownKeys")||function(t){var r=i.f(a(t)),e=u.f;return e?c(r,e(t)):r}},4488:(t,r,e)=>{var n=e(8554),o=TypeError;t.exports=function(t){if(n(t))throw new o("Can't call method on "+t);return t}},7152:(t,r,e)=>{var n,o=e(7854),i=e(2104),u=e(614),a=e(9363),c=e(8113),f=e(206),s=e(8053),p=o.Function,l=/MSIE .\./.test(c)||a&&((n=o.Bun.version.split(".")).length<3||"0"===n[0]&&(n[1]<3||"3"===n[1]&&"0"===n[2]));t.exports=function(t,r){var e=r?2:1;return l?function(n,o){var a=s(arguments.length,1)>e,c=u(n)?n:p(n),l=a?f(arguments,e):[],v=a?function(){i(c,this,l)}:c;return r?t(v,o):t(v)}:t}},6200:(t,r,e)=>{var n=e(2309),o=e(9711),i=n("keys");t.exports=function(t){return i[t]||(i[t]=o(t))}},5465:(t,r,e)=>{var n=e(7854),o=e(3072),i="__core-js_shared__",u=n[i]||o(i,{});t.exports=u},2309:(t,r,e)=>{var n=e(1913),o=e(5465);(t.exports=function(t,r){return o[t]||(o[t]=void 0!==r?r:{})})("versions",[]).push({version:"3.33.0",mode:n?"pure":"global",copyright:"© 2014-2023 Denis Pushkarev (zloirock.ru)",license:"https://github.com/zloirock/core-js/blob/v3.33.0/LICENSE",source:"https://github.com/zloirock/core-js"})},6293:(t,r,e)=>{var n=e(7392),o=e(7293),i=e(7854).String;t.exports=!!Object.getOwnPropertySymbols&&!o((function(){var t=Symbol("symbol detection");return!i(t)||!(Object(t)instanceof Symbol)||!Symbol.sham&&n&&n<41}))},1400:(t,r,e)=>{var n=e(9303),o=Math.max,i=Math.min;t.exports=function(t,r){var e=n(t);return e<0?o(e+r,0):i(e,r)}},5656:(t,r,e)=>{var n=e(8361),o=e(4488);t.exports=function(t){return n(o(t))}},9303:(t,r,e)=>{var n=e(4758);t.exports=function(t){var r=+t;return r!=r||0===r?0:n(r)}},7466:(t,r,e)=>{var n=e(9303),o=Math.min;t.exports=function(t){return t>0?o(n(t),9007199254740991):0}},7908:(t,r,e)=>{var n=e(4488),o=Object;t.exports=function(t){return o(n(t))}},7593:(t,r,e)=>{var n=e(6916),o=e(111),i=e(2190),u=e(8173),a=e(2140),c=e(5112),f=TypeError,s=c("toPrimitive");t.exports=function(t,r){if(!o(t)||i(t))return t;var e,c=u(t,s);if(c){if(void 0===r&&(r="default"),e=n(c,t,r),!o(e)||i(e))return e;throw new f("Can't convert object to primitive value")}return void 0===r&&(r="number"),a(t,r)}},4948:(t,r,e)=>{var n=e(7593),o=e(2190);t.exports=function(t){var r=n(t,"string");return o(r)?r:r+""}},6330:t=>{var r=String;t.exports=function(t){try{return r(t)}catch(t){return"Object"}}},9711:(t,r,e)=>{var n=e(1702),o=0,i=Math.random(),u=n(1..toString);t.exports=function(t){return"Symbol("+(void 0===t?"":t)+")_"+u(++o+i,36)}},3307:(t,r,e)=>{var n=e(6293);t.exports=n&&!Symbol.sham&&"symbol"==typeof Symbol.iterator},3353:(t,r,e)=>{var n=e(9781),o=e(7293);t.exports=n&&o((function(){return 42!==Object.defineProperty((function(){}),"prototype",{value:42,writable:!1}).prototype}))},8053:t=>{var r=TypeError;t.exports=function(t,e){if(t<e)throw new r("Not enough arguments");return t}},4811:(t,r,e)=>{var n=e(7854),o=e(614),i=n.WeakMap;t.exports=o(i)&&/native code/.test(String(i))},5112:(t,r,e)=>{var n=e(7854),o=e(2309),i=e(2597),u=e(9711),a=e(6293),c=e(3307),f=n.Symbol,s=o("wks"),p=c?f.for||f:f&&f.withoutSetter||u;t.exports=function(t){return i(s,t)||(s[t]=a&&i(f,t)?f[t]:p("Symbol."+t)),s[t]}},6815:(t,r,e)=>{var n=e(2109),o=e(7854),i=e(7152)(o.setInterval,!0);n({global:!0,bind:!0,forced:o.setInterval!==i},{setInterval:i})},8417:(t,r,e)=>{var n=e(2109),o=e(7854),i=e(7152)(o.setTimeout,!0);n({global:!0,bind:!0,forced:o.setTimeout!==i},{setTimeout:i})},2564:(t,r,e)=>{e(6815),e(8417)}},r={};function e(n){var o=r[n];if(void 0!==o)return o.exports;var i=r[n]={exports:{}};return t[n].call(i.exports,i,i.exports,e),i.exports}e.n=t=>{var r=t&&t.__esModule?()=>t.default:()=>t;return e.d(r,{a:r}),r},e.d=(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},e.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}(),e.o=(t,r)=>Object.prototype.hasOwnProperty.call(t,r),e(2564),console.log(0),setTimeout((function(){console.log("我一路向北，离开有你的季节")}),1e3)})();

webpack的配置可以把babel的配置单独拿出来，放到.babelrc文件中

.babelrc.js

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        // 指定core-js版本
        corejs: 3,
        // 要兼容的浏览器版本
        targets: {
          chrome: '60',
          firefox: '60',
          ie: '9',
          safari: '10',
          edge: '17'
        },
        // 按需加载
        useBuiltIns: 'usage',
      }
    ]
  ]
}

rules: [
  {
    test: /\.ts$/,
    use: [
      'babel-loader',
      'ts-loader'
    ],
    exclude: /node_modules/
  }
]