TypeScript + React + Webpack

• ， 18 5月 2018
• 作者 hliang
• TypeScript/JavaScript

TypeScript + React + Webpack

首先假定你的开发电脑上已经安装了npm。

1、环境：

全局安装TypeScript（安装tsc命令）

npm i -g typescript

全局安装Webpack（安装webpack命令）

npm i -g webpack

2、工程：

新建工程目录，并切换到工程目录下

mkdir ~/myProject# cd ~/myProject

初始化工程，并使用npm下载react和react-dom

npm init# npm i --save react react-dom @types/react @types/react-dom

初始化typescript环境，并创建tsc的配置文件tsconfig.json

tsc --init

修改tsconfig.json，增加或修改的内容

compilerOptions.target = "es6"
compilerOptions.jsx = "react"
compilerOptions.outDir = "path/to/js"
compilerOptions.watch = true
files = [
    'path/to/src/a.tsx',
    'path/to/src/b.tsx'
]

创建webpack配置文件webpack.config.js，并填写内容

const path = require('path');

module.exports = {
    entry: {
        'a': 'path/to/js/a.js',
        'b': 'path/to/js/b.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    mode: 'development',
    // mode: 'production',
};

3、开发 && 打包

实时监听文件变化，并自动打包

typescript实时编译

tsc --watch

因为之前的tsconfig.json配置文件中，配置了watch=true，所以默认加载当前目录的tsconfig.json时，会自动以监听的方式启动。一旦发现path/to/src目录下的tsx文件发生变化，会自动创建对应的path/to/js目录下的js文件。

webpack实时打包

webpack --watch

监听到path/to/js目录下的js文件内容发生变化，则自动进行打包操作，生成到dist目录下。

但是前面webpack.config.js文件中配置的mode模式为development开发模式。所以当项目最终上线时，还需要进行一次手动打包，直接指定模式为production生产模式。

生产模式会针对js和css内容进行压缩处理，去除其中的注释、空行等无用内容。

webpack --mode production

就这些了，暂时记录到这儿吧~~~