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