Webpack搭建完整Typescript开发环境

来源：互联网发布：怎样申请多个淘宝小号编辑：程序博客网时间：2024/06/07 01:16

前言

IDE提供了强大的纠错与补全能力，但是对于从开发时的编程语言实时转译，提供开发本地服务器以及自动刷新，到转为生产环境代码的编译，压缩，混淆代码以及打包，还是交给一些第三方工具的吧，对，我说的就是Typescript代替Javascript进行前端开发，第三方工具就说的是神器webpack。

在此记录一下，下一次直接复制粘贴 :-p

需求

开发环境

即时编译为js，并自动刷新页面

生产环境

将es6/es7转为es5
混淆并压缩转译完的js代码

环境搭建

cd  <your-dev-dir>npm init

目录如下

<your-dev-dir>├── dist              // 生产环境的js代码输出文件夹│   └── index.html   // html 页面├── .babelrc          // babel 配置文件├── package-lock.json├── package.json├── src│   └── typescript│       ├── main.ts         // typescript入口文件│       ├── .......         // 其他ts文件或模块├── tsconfig.json        // typescript配置文件，IDE会读取├── webpack.common.js    // wepack通用配置文件├── webpack.dev.js       // webpack开发环境配置文件└── webpack.prod.js      // webpack生产环境配置文件

安装依赖

npm install --save-dev babel babel-loader babel-polyfill babel-preset-env ts-loader typescript uglifyjs-webpack-plugin webpack webpack-dev-server webpack-merge

注：目前babel官方推荐使用 babel-preset-env，而不是 babel-preset-201x 了

文件填写

> dist/index.html

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Title</title></head><body><!-- ... --><!-- 引入js文件 --><script src="bundle.min.js"></script>  </body></html>

> package.json

// ...{    "scripts": {        // 启动开发环境        "dev": "webpack-dev-server --client-log-level none --color --inline --hot --config webpack.dev.js",        // 启动生产环境        "build": "webpack --config webpack.prod.js --progress --color"  },// ...}

> tsconfig.json

{  "compilerOptions": {    "sourceMap": true,    "allowJs": true,    "module": "commonjs",    "removeComments": true,   // 可以使用 Promise, async, await等新语法    "target": "es2017"  }}

> .babelrc

这里完全复制粘贴官方示例代码，详见官网

{ "presets": [  ["env", {    "targets": {      "browsers": ["last 2 versions", "safari >= 7"]    }  }]] }

> webpack.common.js

必须添加 babel-polyfill，否则生产环境转es5会出错

const path = require('path');module.exports = {  entry: ['babel-polyfill', './src/typescript/main.ts'],  resolve:    {      extensions: ['.ts', '.js', '.json']    },};

> webpack.dev.js

const path = require('path');const merge = require('webpack-merge');// 引入通用webpack配置文件const common = require('./webpack.common.js');module.exports = merge(common, {  module: {    rules:      [        {          test: /\.tsx?$/,          loader: 'ts-loader'        },      ]  },  // 使用 source-map  devtool: 'source-map',  // 对 webpack-dev-server 进行配置  devServer: {    contentBase: './dist',    // 设置localhost端口    port: 9000,    // 自动打开浏览器    open: true,  },  plugins: [  ],  // 设置出口文件地址与文件名  output: {    path: path.resolve(__dirname, 'dist'),    filename: 'bundle.min.js'  },});

> webpack.prod.js

const path = require('path');const merge = require('webpack-merge');// 引入通用webpack配置文件const common = require('./webpack.common.js');const UglifyJSPlugin = require('uglifyjs-webpack-plugin');// 对js代码进行混淆压缩的插件const uglifyJSPlugin = new UglifyJSPlugin();// 对babel的配置，内容同.babelrc文件const babelOptions = {  "presets": [    ["env", {      "targets": {        "browsers": ["last 2 versions", "safari >= 7"]      }    }]  ]}module.exports = merge(common, {  module: {    rules: [{      test: /\.ts(x?)$/,      exclude: /node_modules/,      use: [        {          loader: 'babel-loader',          options: babelOptions        },        {          loader: 'ts-loader'        }      ]    }]},  devtool: 'cheap-module-source-map',  plugins: [    uglifyJSPlugin,  ],  // 设置出口文件地址与文件名  output: {    path: path.resolve('dist'),    filename: 'bundle.min.js'  },});

大功告成

进行开发！

npm run dev

开发完成，获取最终文件

npm run build

注：先停止第一个命令

阅读全文

0 0