项目初始化 – WebPack – React - ES6 – Babel-TypeScript – Antd

吴嘉禧

2023-12-01

安装最新版node.js

https://nodejs.org/en/

可切换镜像

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
```
- 打开页面 http://localhost:3333

引入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 文件
    }]
  ]
}

项目初始化 – WebPack – React - ES6 – Babel-TypeScript – Antd

相关阅读

相关文章

相关问答

相关文档