仅使用 babel 构建 typescript vue 应用程序?
Posted
技术标签:
【中文标题】仅使用 babel 构建 typescript vue 应用程序?【英文标题】:Build typescript vue apps with only babel? 【发布时间】:2020-12-14 01:48:14 【问题描述】:如何仅使用 babel 转译和构建我的 typescript vue 应用程序?我广泛使用了 vue-cli-service,但达到了我只需要最小设置的地步,没有 webpack 或任何东西。
我的.babelrc
"presets": ["babel-preset-typescript-vue"],
"plugins": ["@babel/plugin-transform-typescript"]
我的 package.json 依赖项:
"devDependencies":
"@babel/cli": "^7.10.5",
"@babel/plugin-transform-typescript": "^7.11.0",
"@babel/preset-env": "^7.11.0",
"babel-loader": "^8.1.0",
"babel-preset-env": "^1.7.0",
"babel-preset-typescript-vue": "^1.1.1",
"typescript": "~3.9.3",
"vue-template-compiler": "^2.6.11"
,
"dependencies":
"vue": "^2.6.12",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^8.4.2",
"vuex": "^3.5.1"
我的入口main.ts文件:
import Vue from 'vue'
import Vuex from 'vuex';
import App from './App.vue'
Vue.config.productionTip = false;
Vue.use(Vuex);
new Vue(render: h => h(App)).$mount('#app');
我的应用程序.vue
<script lang="ts">
import Component, Vue from 'vue-property-decorator';
@Component
class App extends Vue
export default App;
</script>
<template>
<div class="foobar">Babel worked</div>
</template>
我的构建脚本:
babel src/main.ts --out-dir build
【问题讨论】:
您是否使用vue-cli3
来创建您的项目?
@Tingsen Cheng 实际上是的。
类似问题:***.com/questions/59103389/…
【参考方案1】:
很遗憾,您不能使用 babel 构建,因为它只能转换语言而不能构建模块。您仍然需要某种类型的捆绑器来解析 require / import
导入。如果你不想要庞大的 webpack 配置,可以查看 Rollup 或 Parcel
如果你只想编译typescript
和vue typescript
,你需要安装@babel/preset-typescript
@babel/preset-env
,将它们包含在.babelrc
文件中。
然后使用babel ./src/main.ts --out-dir build --extensions ".ts"
或者更好,但使用本地安装的 babel ./node_modules/.bin/babel ./src/main.ts --out-dir build --extensions ".ts"
【讨论】:
以上是关于仅使用 babel 构建 typescript vue 应用程序?的主要内容,如果未能解决你的问题,请参考以下文章
@babel/typescript 在 webpack 构建时不会抛出错误
Storybook - 使用自定义 webpack / babel 的 typescript 项目中没有出现任何故事
JavaScript是如何工作的:深入类和继承内部原理 + Babel和TypeScript之间转换