npm init
新建以下文件目录:
"devdependencies": { "@babel/core": "^7.4.5", "@babel/preset-env": "^7.4.5", "babel-loader": "^8.0.6", "ts-loader": "^6.0.3", "typescript": "^3.5.2", "webpack": "^4.35.0", "webpack-cli": "^3.3.4" }, "dependencies": { "@babel/polyfill": "^7.4.4", "core-js": "2" }
{ "compileonsave": false, "compileroptions": { "sourcemap": true, "noimplicitany": false, "nounusedparameters": true, "moduleresolution": "node", "module": "esnext", "target": "esnext", "baseurl": "./" }, "include": ["src/**/*.ts"], "exclude": ["node_modules"] }
参数含义参考
{ "presets": [ [ "@babel/preset-env", { "usebuiltins": "usage", "corejs": "2" } ] ] }
usebuiltins:"usage" 将会按需引入babel/polyfill。
babel7已经废弃了@babel/preset-stage-0等preset。
具体参考
const path = require("path"); module.exports = { mode: "production", entry: "./src", output: { path: path.resolve(__dirname, "dist"), filename: "ma.min.js", library: "ma", librarytarget: "umd" }, module: { rules: [ { test: /\.ts$/, use: ["babel-loader", "ts-loader"], exclude: [path.resolve(__dirname, "node_modules")] } ] }, resolve: { extensions: [".ts", ".js"] } // devtool: "inline-source-map" };
ts文件将会经过ts-loader转成es6,再由babel-loader转成es5并加入polyfill
参数含义参考
"scripts": { "compile": "webpack" },
比如我们在src下定义index.ts
const testfunc = (num: number) => { const arr: number[] = [1, 2, 3, 4]; return arr.includes(num); }; export { testfunc };
其中使用了箭头函数和es7方法includes。
执行打包:
打包完成,此时在dist下已经打包出了ma.min.js文件,其中includes方法也被做了polyfill处理。
ts-loader也可以直接打包成es5语法,但不会做polyfill,况且如果项目依赖babel生态中的其他插件,也需要使用babel-loader.
如对本文有疑问, 点击进行留言回复!!
vue脚手架安装以及vue脚手架创建项目(详细步骤),看这篇文章就行了,小白也能创建自己的项目
JavaScript递归函数详解:如何使用递归及简单的递归案例
JavaScript 中的break、continue、return的用法和区别
网友评论