TypeScript和vuejs 搭建webpack，初次體驗(yàn)

shengguo 發(fā)布于2019-08-21 17:39 / 703人閱讀

摘要：決定改開發(fā)好，也好，二者結(jié)合實(shí)踐一下，網(wǎng)上一搜，剛好有。下面我把所有過程寫下，如有問題可以再文后留言，我詳解一下。

決定改TypeScript開發(fā)
TypeScript好，vuejs也好，二者結(jié)合實(shí)踐一下，網(wǎng)上一搜：https://github.com/Microsoft/...，剛好有。以后就用TypeScript搞了。下面我把所有過程寫下，如有問題可以再文后留言，我詳解一下。或者加我群探討：點(diǎn)此處直接加群，或者：478694438

第一步：初始化項(xiàng)目
cnpm init

第二步：安裝依賴

npm install https://github.com/DanielRosenwasser/vue#540a38fb21adb7a7bc394c65e23e6cffb36cd867

npm install --save-dev typescript webpack ts-loader css-loader vue-loader vue-template-compiler@2.2.1

第三步：tsconfig.json
根目錄下新建tsconfig.json，內(nèi)容：

{
    "compilerOptions": {
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5"
    },
    "include": [
        "./src/**/*"
    ]
}

第四步：根目錄下添加webpack.config.js

var path = require("path")
var webpack = require("webpack")

module.exports = {
  entry: "./index.ts",
  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/",
    filename: "build.js"
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: "vue-loader",
        options: {
          loaders: {

            "scss": "vue-style-loader!css-loader!sass-loader",
            "sass": "vue-style-loader!css-loader!sass-loader?indentedSyntax",
          }
          // other vue-loader options go here
        }
      },
      {
        test: /.tsx?$/,
        loader: "ts-loader",
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/.vue$/],
        }
      },
      {
        test: /.(png|jpg|gif|svg)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]?[hash]"
        }
      }
    ]
  },
  resolve: {
    extensions: [".ts", ".js", ".vue", ".json"],
    alias: {
      "vue$": "vue/dist/vue.esm.js"
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: "#eval-source-map"
}

if (process.env.NODE_ENV === "production") {
  module.exports.devtool = "#source-map"
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: ""production""
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

第五步:修改package.json

"scripts": {
    "build": "webpack",
    "test": "echo "Error: no test specified" && exit 1"
  }

第六步：新建index.ts

import Vue from "vue";

let v = new Vue({
    el: "#app",
    template: `
    
        Hello {{name}}!
        Name: 
    `,
    data: {
        name: "World"
    }
});

第七步：新建index.html

第八步：完成
cnpm run build 然后瀏覽器打開index.html 即可看到效果。最終結(jié)果如下圖：