TypeScript和vuejs 搭建webpack，初次體驗

時間 2019-12-08

標籤 typescript vuejs 搭建 webpack 初次體驗简体版

原文原文鏈接

決定改TypeScript開發
TypeScript好，vuejs也好，兩者結合實踐一下，網上一搜：https://github.com/Microsoft/...，恰好有。之後就用TypeScript搞了。下面我把全部過程寫下，若有問題能夠再文後留言，我詳解一下。或者加我羣探討：點此處直接加羣，或者：478694438css

第一步：初始化項目
cnpm inithtml

第二步：安裝依賴vue

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，內容：node

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

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

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.jsongit

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

第六步：新建index.tsgithub

import Vue from "vue";

let v = new Vue({
    el: "#app",
    template: `
    <div>
        <div>Hello {{name}}!</div>
        Name: <input v-model="name" type="text">
    </div>`,
    data: {
        name: "World"
    }
});

第七步：新建index.htmlweb

<!doctype html>
<html>
<head></head>

<body>
    <div id="app"></div>
</body>
<script src="./build.js"></script>

</html>

第八步：完成
cnpm run build 而後瀏覽器打開index.html 便可看到效果。最終結果以下圖：
typescript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。