javascript - 仅使用 babel 构建 typescript vue 应用程序?
问题描述
如何仅使用 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
解决方案
不幸的是,你不能用 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"
推荐阅读
- python - 如何过滤带有索引的列表
- regex - 如何将 *.htm *,htm *,html 重定向到 .htaccess 中的 *.html
- python - 如何在 Pyspark 聚合中进行多重算术运算
- pandas - 合成时间戳熊猫
- javascript - 角度聆听变化
- ios - 通过 Jenkins 和 Fastlane 构建 iOS 管道时出现 CodeSign 错误
- pagespeed - 如何获得 LCP 的指标分数?
- sparql - 如何更好地过滤 sparql 查询输出以避免查询超时限制达到错误?
- google-chrome - 有什么方法可以用来更改谷歌浏览器 pdf 查看器上的下载行为
- neural-network - 如何防止神经网络中的记忆?