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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注