vue+ typescript 使用parcel 构建
parcel 是一个零配置的前端构建工具,相比webpack 更快，同时使用简单以下是
一个简单的使用typescript 开发vue 应用，同时使用parcel 构建，同时集成了docker
构建，代码很简单，同时会有一些碰到问题的解决
项目
说明parcel 是零配置的，我们基本不需要配置多少，基本都是自动的
- 项目结构
├── Dockerfile
├── README.md
├── css
│ ├── index.css
│ └── login.css
├── docker-compose.yaml
├── images
│ └── app.png
├── index.html
├── nginx.conf
├── package.json
├── src
│ ├── app.vue
│ ├── app.vue.d.ts
│ ├── index.ts
│ └── user.js
├── tsconfig.json
├── types
│ └── vue.shims.d.ts
└── yarn.lock
- 项目说明
src 为代码，app.vue 为一个简单的vue 组件，app.vue.d.ts 是自动生成的typescript 定义（使用vuetype）,index.ts 为入口，user.js 为
一个es6的模块（主要是测试混合集成），css 以及image 为一些样式文件以及图片 - 代码说明
package.json
{
"name": "first",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"@types/shortid": "^0.0.29",
"@types/vue": "^2.0.0",
"@vue/component-compiler-utils": "^3.0.2",
"parcel-bundler": "^1.12.4",
"sass": "^1.23.3",
"typescript": "^3.7.2",
"vue-template-compiler": "^2.6.10"
},
"scripts": {
"start": "parcel index.html",
"vue-type": "vuetype --watch src",
"clean": "rm -rf build/mylogin",
"build": "NODE_ENV=production npm run clean && parcel build --no-source-maps index.html --out-dir build/mylogin"
},
"dependencies": {
"shortid": "^2.2.15",
"vue": "^2.6.10",
"vue-class-component": "^7.1.0",
"vue-hot-reload-api": "^2.3.4",
"vuetype": "^0.3.2"
}
}
src/index.ts
import shortid from "shortid"
import { UserLogin } from "./user"
import Vue from "vue"
import App from "./app.vue"
class User {
public id: string;
public userLogin: UserLogin;
constructor(public name: string, public age: number) {
this.name = name;
this.age = age;
this.id = shortid.generate();
this.userLogin = new UserLogin();
}
render() {
// let that =this;
window.onload = function () {
// let token = that.userLogin.token;
// let content=`${that.name}----${that.age}----${that.id}---${token}`
new Vue(App).$mount('#content')
}
}
}
var user = new User("dalong", 333)
user.render()
src/user.js
import shortid from "shortid"
class UserLogin {
constructor() {
this.token = shortid.generate();
}
login() {
console.log("login", this.token)
}
}
export default UserLogin
export {
UserLogin
}
src/app.vue
<template >
<div class="container">Hello {{bundler}},token info {{token}}</div>
</template>
<script lang="ts">
import Vue from "vue";
import { UserLogin } from "./user";
import Component from "vue-class-component";
@Component
export default class App extends Vue {
bundler = "demo";
token = "";
data() {
return {
bundler: "Parcel",
token: new UserLogin().token,
version: "v1"
};
}
}
</script>
<style lang="scss" scoped>
.container {
color: green;
}
</style>
使用
- 安装依赖
yarn
- 生成组件ts 定义
yarn vue-type
- live 模式运行
yarn start
效果
- docker 运行
dockerfile
FROM openresty/openresty:alpine
COPY nginx.conf /usr/local/openresty/nginx/conf/
COPY build/mylogin/ /usr/local/openresty/nginx/html/
EXPOSE 80
EXPOSE 443
EXPOSE 88
nginx 配置
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
gzip on;
gzip_min_length 2k;
gzip_buffers 4 16k;
gzip_comp_level 8;
gzip_types text/plain text/css image/png application/javascript image/jpeg image/gif;
real_ip_header X-Forwarded-For;
real_ip_recursive on;
server {
listen 80;
server_name localhost;
charset utf-8;
location / {
root html;
index index.html index.htm;
}
location /ip {
default_type text/html;
content_by_lua_block{
ngx.say(ngx.var.remote_addr)
}
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
docker-compose文件
version: "3"
services:
app:
build: ./
image: dalongrong/parcel-demoapp
ports:
- "80:80"
- docker 运行
yarn build
docker-compose build
docker-compose up -d
几个问题
- vue 组件import 提示无法找到
解决方法：
使用vuetype 生成类型定义
或者添加 vue vue.shims.d.ts
内容
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
同时tsconfig.json 添加
"typeRoots": [
"./src"
"./node_modules/vue/types",
],
参考资料
https://github.com/rongfengliang/parcel-learning
https://github.com/parcel-bundler/parcel
https://github.com/ktsn/vuetype
https://github.com/vuejs/vue/issues/5298
https://github.com/vuejs/vue-cli/issues/1198
