React + Typescript + Webpack 开发环境配置
BlancaCrisp
8年前
<p>Typescript 给 React 带来很多好处：在组件头部以 interface 方式定义 props 、 state ，在编译中发现问题，使用VSCode等工具实现实时类型校验等，且配置也是非常简单，步骤如下。</p> <h2><strong>文件目录</strong></h2> <pre> <code class="language-javascript">. ├── build # 前端配置文件 │ ├── index.html │ ├── webpack.config.js ├── app # 前端目录 ├── .gitignore ├── package.json ├── tsconfig.json └── tslint.json</code></pre> <h2><strong>配置流程</strong></h2> <h3><strong>创建项目</strong></h3> <pre> <code class="language-javascript">mkdir my-project && cd my-project npm init</code></pre> <h3><strong>安装依赖</strong></h3> <pre> <code class="language-javascript">npm i -g webpack webpack-dev-server npm i --save-dev react react-dom @types/react @types/react-dom npm i --save ts-loader source-map-loader npm link --save webpack webpack-dev-server</code></pre> <h3><strong>配置 webpack</strong></h3> <pre> <code class="language-javascript">/* build/webpack.config.js */ const config = { entry: './Yoda/index.tsx', output: { filename: 'app.bundle.js', path: './public', publicPath: '/assets' }, devtool: 'source-map', resolve: { extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js'] }, module: { loaders: [ { test: /\.tsx?$/, loader: 'ts-loader' } ], preLoaders: [ { test: /\.js$/, loader: 'source-map-loader' } ] }, devtool: 'eval' } module.exports = config</code></pre> <h3><strong>配置 tsconfig</strong></h3> <pre> <code class="language-javascript">/* tsconfig.json */</code></pre> <pre> <code class="language-javascript">{ "compilerOptions": { "outDir": "./public/", "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es5", "jsx": "react" }, "files": [ "./app/index.tsx" ] }</code></pre> <p>至此，基本配置已经完成，后面创建好一个入口页面和 entry 文件就可以跑起来了：</p> <pre> <code class="language-javascript">/* build/index.html */</code></pre> <pre> <code class="language-javascript"><!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <title>Hello world</title> <script src="http://localhost:8080/webpack-dev-server.js"></script> </head> <body> <div id="app"></div> <script src="assets/app.bundle.js"></script> </body> </html></code></pre> <pre> <code class="language-javascript">/* app/index.tsx */ import * as React from 'react' import { render } from 'react-dom' interface IAppProps {} interface IAppState {} class App extends React.Component<IAppProps, IAppState> { public render(): JSX.Element { return ( <div> Hello world </div> ) } } render(<App />, document.getElementById('app'))</code></pre> <h3><strong>启动项目</strong></h3> <pre> <code class="language-javascript">webpack-dev-server --inline --config build/webpack.config.dev.js --content-base build</code></pre> <p>出来吧神龙</p> <h2><strong>简单的说明</strong></h2> <h3><strong>Webpack 配置</strong></h3> <p>Webpack配置其实是一件很简单的事情，这也是他具备强大竞争力的重要因素。</p> <p>从配置文件中可以看出，里面无非就是 entry 、 output 和 loader ，如果需要编译CSS，在 loader 里面加一个即可：</p> <pre> <code class="language-javascript">npm i --save-dev style-loader css-loader</code></pre> <pre> <code class="language-javascript">/* build/webpack.config.js */ const config = { // ... module: { loaders: [ { test: /\.css/, loader: 'style-loader!css-loader' } ], // ... }, // ... }</code></pre> <h3><strong>项目启动</strong></h3> <p>项目启动的命令过长，放进 package.json 的 scripts 就好了：</p> <pre> <code class="language-javascript">/* package.json */</code></pre> <pre> <code class="language-javascript">{ "scripts": { "dev": "webpack-dev-server --inline --config build/webpack.config.dev.js --content-base build", }, }</code></pre> <p>再执行以下命令试试：</p> <pre> <code class="language-javascript">npm run dev</code></pre> <h3><strong>tslint</strong></h3> <p>在开发中如果有个约束代码的工具能够让代码更加优雅，以前用的是 eslint ，如果用 .tsx 就不能生效了，这里推荐使用 tslint ：</p> <pre> <code class="language-javascript">npm i -g tslint cd my-project tslint init</code></pre> <p>这样会在项目文件中创建一个现成的 tslint 配置文件： tslint.json ，个性化方案可以自行设置。</p> <h2><strong>参考</strong></h2> <p><a href="/misc/goto?guid=4958999009084926641" rel="nofollow,noindex">webpack 新官网</a> <a href="/misc/goto?guid=4959676961343349964" rel="nofollow,noindex">webpack dev server</a> <a href="/misc/goto?guid=4959727194387178717" rel="nofollow,noindex">tsconfig.json 配置文档</a> <a href="/misc/goto?guid=4959664944010097738" rel="nofollow,noindex">style-loader</a> <a href="/misc/goto?guid=4959727194497507312" rel="nofollow,noindex">tslint</a></p> <p> </p> <p>来自：https://segmentfault.com/a/1190000007631069</p> <p> </p>