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

效果

vue+ typescript 使用parcel 构建

 

 


vue+ typescript 使用parcel 构建

 

 

  • 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

上一篇:Serializable 和Parcelable 详解


下一篇:Binder基本概念