TypeScript+React+webpack简洁框架

最新推荐文章于 2024-05-11 05:26:38 发布

b10l07

最新推荐文章于 2024-05-11 05:26:38 发布

阅读量260

点赞数

文章标签： javascript webpack json ViewUI

原文链接：https://juejin.im/post/5c6630c86fb9a049c232f3aa

版权

创建项目目录

TypeScript文件会放在src文件夹里，通过TypeScript编译器编译，然后经webpack处理，最后生成一个bundle.js文件放在dist目录下。我们自定义的组件将会放在 src/components文件夹下

初始化工程

npm init

安装依赖包

首先，确保全局安装了webpack npm install -g webpack
安装react相关 npm install --save react react-dom @types/react @types/react-dom
添加开发时依赖awesome-typescript-loader和source-map-loader npm install --save-dev typescript awesome-typescript-loader source-map-loader

添加TypeScript配置文件

项目根路径下增加tsconfig.json

{
	"compilerOptions": {
		"outDir": "./dist/",
		"sourceMap": true,
		"noImplicitAny": true,
		"module": "commonjs",
		"target": "es5",
		"jsx": "react"
	},
	"include": [
		"./src/**/*"
	]
}
复制代码

Demo代码编写

src>component目录下添加greeter.tsx文件

import * as React from 'react';
export interface HelloProps {
	compiler: string;
	framework: string;
}
export class Hello extends React.Component<HelloProps, {}> {
	render() {
		return <h1>Hello from { this.props.compiler } and { this.props.framework } !</h1>;
	}
}
复制代码

import * as React from 'react';
import * as ReactDom from 'react-dom';

import { Hello } from './components/greeter';

ReactDom.render(
  <Hello compiler="typescript" framework="react" />,
  document.getElementById('demo')
)
复制代码

增加一个页面展示组件，根目录下添加index.html文件

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Hello React!</title>
</head>

<body>
  <div id="demo"></div>

  <!-- Dependencies -->
  <script src="./node_modules/react/umd/react.development.js"></script>
  <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

  <!-- Main -->
  <script src="./dist/bundle.js"></script>
</body>

</html>
复制代码

webpack配置

工程根目录下创建一个webpack.config.js

module.exports = {
  entry: "./src/index.tsx",
  output: {
    filename: "bundle.js",
    path: __dirname + "/dist"
  },

  // Enable sourcemaps for debugging webpack's output.
  devtool: "source-map",

  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".tsx", ".js", ".json"]
  },

  module: {
    rules: [
      // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
      { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
    ]
  },

  // When importing a module whose path matches one of the following, just
  // assume a corresponding global variable exists and use that instead.
  // This is important because it allows us to avoid bundling all of our
  // dependencies, which allows browsers to cache those libraries between builds.
  externals: {
    "react": "React",
    "react-dom": "ReactDOM"
  },
};
复制代码

构建命令添加

package.json中添加以下内容

...
"scripts": {
    "build": "webpack"
  },
...
复制代码

运行以下命令进行构建 npm run build
浏览器打开index.html查看效果

源码地址

转载于:https://juejin.im/post/5c6630c86fb9a049c232f3aa

b10l07

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
TypeScript+React+webpack简洁框架

创建项目目录TypeScript文件会放在src文件夹里，通过TypeScript编译器编译，然后经webpack处理，最后生成一个bundle.js文件放在dist目录下。我们自定义的组件将会放在 src/components文件夹下初始化工程npm init安装依赖包首先，确保全局安装了webpacknpm install -g webpack安装react相关npm...
复制链接

扫一扫