TypeScript学习笔记(三)Webpack
来源:互联网 发布:尼克杨数据 编辑:程序博客网 时间:2024/06/05 17:40
照着教程配完报了个奇怪的错误,哪位大神帮忙看一下
1.创建项目:
mkdir projcd proj
mkdir src
mkdir dist
mkdir components2.初始化程序:
npm init
3.安装依赖ts-loader和source-map-loader。
npm install -g typescript webpack
npm install --save react react-dom @types/react @types/react-dom4. 安裝
npm install --save-dev ts-loader source-map-loadernpm link typescript5.在根目录下添加tsconfig.json文件
{"compilerOptions": {"outDir": "./dist/","sourceMap": true,"noImplicitAny": true,"module": "commonjs","target": "es5","jsx": "react"},"files": ["./src/components/Hello.tsx","./src/index.tsx"]}
6.写代码,在src/components目录下创建名为Hello.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>;}}7.在src下创建index.tsx文件
import * as React from "react";import * as ReactDOM from "react-dom";import { Hello } from "./components/Hello";ReactDOM.render(<Hello compiler="TypeScript" framework="React" />,document.getElementById("example"));8.在proj根目录创建index.html
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Hello React!</title></head><body><div id="example"></div><!-- Dependencies --><script src="./node_modules/react/dist/react.js"></script><script src="./node_modules/react-dom/dist/react-dom.js"></script><!-- Main --><script src="./dist/bundle.js"></script></body></html>
9.创建webpack配置文件
1)在工程根目录创建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: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]},module: {loaders: [// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.{test: /\.tsx?$/,loader: "ts-loader"}],preLoaders: [// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.{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"},};
2)执行webpack
3)在浏览器打开index.html
阅读全文
0 0
- TypeScript学习笔记(三)Webpack
- Typescript学习笔记(三)——数据类型
- TypeScript学习笔记(一)
- typescript学习笔记(二)
- Webpack学习 (三)
- Gulp学习笔记(三):与webpack结合
- TypeScript数据类型-TS学习笔记(1)
- TypeScript学习笔记之 接口(Interface)
- TypeScript 学习笔记
- TypeScript 学习笔记1
- TypeScript 学习笔记2
- TYPESCRIPT 学习笔记3
- TypeScript学习笔记一
- TypeScript 学习笔记
- Typescript学习笔记
- TypeScript学习笔记
- TypeScript学习笔记一
- webpack学习笔记 (上)
- ajax三级联动
- linux安装必看
- [从零开始系列]AndroidApp研发之路(一) 网络请求的封装(一)
- red hat 下配置上网
- 使用应用上下文容器(ApplicationContext)来获取bean的bean的生命周期
- TypeScript学习笔记(三)Webpack
- Fedora下安装Fcitx
- 完美解决Can't connect to local MySQL server through socket mysql.sock
- 【ThreadLocal】深入JDK源码之ThreadLocal类
- 利用JQuery发送ajax请求进行站内搜索
- 03.Spring Cloud学习笔记之服务注册与服务发现组件Eureka
- 天亮教育基础班001期-经典问题总结
- Unity Shader入门精要笔记(十四):渐变纹理
- ConcurrentHashMap