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
就这些了,暂时记录到这儿吧~~~