react+webpack+typescript配置

目录结构&地址

├── dist
├── node_modules
├── package.json
├── src
	├── index.tsx
├── tsconfig.json
├── webpack.config.js
└── yarn.lock

模板文件地址及使用

package.json

"devDependencies": {
   "babel-core": "^6.24.1",
   "babel-loader": "^7.0.0",
   "babel-preset-es2015": "^6.24.1",
   "babel-preset-react": "^6.24.1",
   "babel-preset-stage-0": "^6.24.1",
   "css-loader": "^0.28.1",
   "jsx-loader": "^0.13.2",
   "less": "^2.7.2",
   "less-loader": "^4.0.3",
   "style-loader": "^0.17.0",
   "ts-loader": "^2.0.3",
   "typescript": "^2.3.2",
   "webpack": "^2.4.1",
   "webpack-dev-server": "^2.4.5"
 },
 "dependencies": {
   "@types/react": "^15.0.23",
   "@types/react-dom": "^15.5.0",
   "prop-types": "^15.5.8",
   "react": "^15.5.4",
   "react-dom": "^15.5.4"
 }

这里需要注意的是安装了 @types/react和@types/react-dom。

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  },
  "exclude": [
    "node_modules"
  ]
}

webpack.config.js

module: {
	rules: [{
		test: /\.(jsx|js)$/,
		use: [{
			loader: "babel-loader"
		}]
	}, {
		test: /\.(tsx|ts)$/,
		loader:"ts-loader",
		exclude:"/node_modules/"
	}]
},

webpack用的是2.0

.babelrc

1
2
3

{
  "presets": ["es2015", "react", "stage-0"]
}

2018-02-03

使用 audioContext 演奏音乐

javascript

react+webpack+typescript配置

目录结构&地址

package.json

tsconfig.json

webpack.config.js

.babelrc

友链

分类

标签云

最新文章

归档

标签

最新文章

归档

标签

Your browser is out-of-date!