ts项目搭建

2022-08-27 01:30:31 阅读：207 来源： 互联网

标签：项目 babel less ts loader webpack html 搭建

1.创建文件夹&项目初始化

npm init -y

2.下载

npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader

npm i -D @babel/core @babel/preset-env  babel-loader core-js

npm i -D  css-loader less  less-loader style-loader  html-webpack-plugin clean-webpack-plugin

3.创建src根文件夹和index.html(作为编译模板)index.ts(作为入口文件)

4.使用一下命令创建tsconfig.json

tsc --init

5.配置package.json

"main":"./src/index.ts", //要修改正确的入口文件哦

"scripts": {
    "start":"webpack-dev-server",  //也可以这样配置 "start":"webpack-dev-server --open Chrome"

// 或者这样的"start":"webpack-dev-server --open 'Google Chrome'"

// 看人家这样配置没报错，我的报错，故用最简单的配置了(苦笑)

　　"build":"webpack" },
//贴上我下载的依赖包版本

"devDependencies": { "@babel/core": "^7.18.13", "@babel/preset-env": "^7.18.10", "babel-loader": "^8.2.5", "clean-webpack-plugin": "^4.0.0", "core-js": "^3.25.0", "css-loader": "^6.7.1", "html-webpack-plugin": "^5.5.0", "less": "^4.1.3", "less-loader": "^11.0.0", "postcss-loader": "^7.0.1", "postcss-preset-env": "^7.8.0", "style-loader": "^3.3.1", "ts-loader": "^9.3.1", "typescript": "^4.8.2", "webpack": "^5.74.0", "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.0.0" }

6.配置webpack.config.js

const path = require('path');
//引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
  "mode": "development",
  //指定入口文件
  entry: "./src/index.ts",
  //指定打包文件所在的目录
  output: {
    //指定打包文件的目录
    path: path.resolve(__dirname, './dist'),
    //打包后文件的文件
    filename: 'bundles.js'
  },
  devServer: {
    static: {
      directory: path.join(__dirname, './'),
      watch: true
  }
},

  //指定webpack打包时要是用的模块
  module: {
    //指定要加载的规则
    rules: [
      {
        // test指定是规则生效的文件
        test: /\.ts$/,
        use: [{
          //指定预加载器
          loader: "babel-loader",
          //配置babel
          options: {
            //配置预定义的环境
            presets: [
              [
                //制定环境插件
                "@babel/preset-env",
                //配置信息
                {
                  //要兼容的浏览器
                  targets: {
                    "chrome": "104"
                  },
                  //指定corejs版本
                  "corejs": "3",
                  //使用corejs的方式usage表示按需加载
                  "useBuiltIns": "usage"
                }
              ]
            ]

          }
        }, 'ts-loader'],
        //要排除的文件
        exclude: /node-modules/
      },{
        test:/\.less$/,
        use:[
          "style-loader",
          "css-loader",
          //引入postcss
          {
            loader:"postcss-loader",
            options:{
              postcssOptions:{
                plugins:[
                  [
                    "postcss-preset-env",
                    {
                      browsers:'last 2 versions'
                    }
                  ]
                ]
              }
            }
          },
          "less-loader"
        ]
      }
    ]
  },
  //配置webpack插件
  plugins: [
    //自动生成html文件 并引入相关的资源
    new HTMLWebpackPlugin({
      title: 'project',
      //模板选项 根据模板生成html文件
      template: "./src/index.html"
    }),
    new CleanWebpackPlugin()
  ],
  //用来设置引用的模块
  resolve: {
    extensions: ['.ts', '.js']
  }
}

7.写点东西看看效果

src/index.html
<div id="main"></div>

src/style/index.less
//设置变量
@bg-color: #b7d438;
@p-color:pink;
// 清除默认样式
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
//主窗口样式
#main{
  width: 360px;
  height: 420px;
  background-color:@p-color;
}
// 引入样式文件
//引入样式
import './style/index.less'


执行 npm start

虽然很简单，但仍出现未曾料想的错误，诸多波折，记录一下，自己要不断加油！！！

标签：项目,babel,less,ts,loader,webpack,html,搭建
来源： https://www.cnblogs.com/guohuimin/p/16629694.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ts项目搭建

虽然很简单，但仍出现未曾料想的错误，诸多波折，记录一下，自己要不断加油！！！