-
安装最新版node.js
-
可切换镜像
npm config set registry http://registry.npm.taobao.org/ -
全局安装Webpack、Webpack-dev-server
npm install webpack webpack-dev-server -g -
项目初始化
npm init / npm init -yes -
安装React、React-Dom
npm install react react-dom --save npm install @types/react @types/react-dom --save-dev -
安装Babel转换器
npm install babel-loader babel-core babel-preset-es2015 --save npm install babel-preset-react --save -
创建项目文件-即-入口文件
touch index.html App.js main.js webpack.config.js -
编辑配置文件 webpack.config
module.exports = { mode: 'development', // 判断为开发环境 entry: './main.js', // 入口文件路径 output: { path: '/', filename: 'index.js' }, devServer: { inline: true, port: 3333 }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, use: [{ loader: "babel-loader", options: { presets: ["react", "es2015"] } }] } ] } } -
Index.html写入
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>React Hello World</title> </head> <body> <div id="app"></div> <script src="index.js"></script> </body> </html> -
App.js写入
import React from 'react'; class App extends React.Component { render() { return <div>Hello World!</div> } } export default App -
Main.js
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App/>, document.getElementById('app')); -
Package.json
{ "name": "handy", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "react": "^16.6.0", "react-dom": "^16.6.0" } } -
开始使用
npm start
-
引入TypeScript---------------（可选）
- 引入
npm install --save-dev typescript awesome-typescript-loader source-map-loader - 添加以下至config
module.exports = { output: { path: __dirname + "/dist", filename: 'index.js' }, // 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"} ] } } - 新增文件 tsconfig.json
{ "compilerOptions": { "moduleResolution": "node", "module": "commonjs", "target": "es5", "noImplicitAny": false, "sourceMap": false, "outDir": "lib", "declaration": true, "jsx": "react", "noImplicitThis": false, "removeComments": false, "skipDefaultLibCheck": true, "skipLibCheck": true, "allowSyntheticDefaultImports": true, "experimentalDecorators": true, "downlevelIteration": true, "pretty": true, "lib": [ "dom", "es5", "scripthost", "es2015", "es2015.promise", "es2015.core", "es2015.collection" ] }, "include": [ "src/**/*" ], "exclude": [ "out", "node_modules" ] } - 新增文件tslint.json
{ "rules": { "no-unused-expression": [ true, "allow-fast-null-checks" ], "no-duplicate-variable": true, "no-unused-variable": [ true, "react" ], "curly": false, "class-name": true, "triple-equals": true } }
- 引入
-
引入Andt Design (可选)
- 引入
npm install antd –save npm install babel-plugin-import –save-dev 按需加载 npm install less less-loader css-loader style-loader –save-dev - 添加一下config
module: { rules: [ { test: /\.(less|css)$/, exclude: /^node_modules$/, use: [ 'style-loader', "css-loader", {loader:"less-loader",options:{javascriptEnabled:true}} ] } ] } - Babelrc
{ "plugins": [ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "true" // `style: true` 会加载 less 文件 }] ] }
- 引入
