如果您对webpack+typescript+babel打包*.min.js文件的环境配置和webpack打包后的js怎么调试感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解webpack+ty

如果您对webpack + typescript + babel打包*.min.js文件的环境配置和webpack打包后的js怎么调试感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解webpack + typescript + babel打包*.min.js文件的环境配置的各种细节，并对webpack打包后的js怎么调试进行深入的分析，此外还有关于2.1、环境配置-AngularJS2 TypeScript 环境配置、javascript – 使用Typescript和Webpack的Fabric.js：Canvas不是构造函数、Material-UI + React + Babel + Webpack 环境配置、React + Typescript + Webpack 开发环境配置的实用技巧。

• webpack + typescript + babel打包*.min.js文件的环境配置（webpack打包后的js怎么调试）
• 2.1、环境配置-AngularJS2 TypeScript 环境配置
• javascript – 使用Typescript和Webpack的Fabric.js：Canvas不是构造函数
• Material-UI + React + Babel + Webpack 环境配置
• React + Typescript + Webpack 开发环境配置

webpack + typescript + babel打包*.min.js文件的环境配置（webpack打包后的js怎么调试）

将多个*.ts文件打包成一个*.min.js文件的开发配置

1、初始化

npm init

新建以下文件目录：

2、安装依赖：

"devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "babel-loader": "^8.0.6",
    "ts-loader": "^6.0.3",
    "typescript": "^3.5.2",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.4"
  },
  "dependencies": {
    "@babel/polyfill": "^7.4.4",
    "core-js": "2"
  }

3、tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "sourceMap": true,
    "noImplicitAny": false,
    "noUnusedParameters": true,
    "moduleResolution": "node",
    "module": "esnext",
    "target": "esnext",
    "baseUrl": "./"
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

参数含义参考https://www.tslang.cn/docs/handbook/compiler-options.html

4、babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": "2"
      }
    ]
  ]
}

useBuiltIns:"usage" 将会按需引入babel/polyfill。

babel7已经废弃了@babel/preset-stage-0等preset。

具体参考https://www.babeljs.cn/docs/babel-preset-env

5、webpack.config.js

const path = require("path");

module.exports = {
  mode: "production",
  entry: "./src",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "ma.min.js",
    library: "MA",
    libraryTarget: "umd"
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: ["babel-loader", "ts-loader"],
        exclude: [path.resolve(__dirname, "node_modules")]
      }
    ]
  },
  resolve: {
    extensions: [".ts", ".js"]
  }
  // devtool: "inline-source-map"
};

ts文件将会经过ts-loader转成es6，再由babel-loader转成es5并加入polyfill

参数含义参考https://webpack.docschina.org/configuration/

6、package.json中定义script

"scripts": {
    "compile": "webpack"
  },

7、执行打包

比如我们在src下定义index.ts

const testFunc = (num: number) => {
  const arr: number[] = [1, 2, 3, 4];
  return arr.includes(num);
};

export { testFunc };

其中使用了箭头函数和ES7方法includes。

执行打包：

打包完成，此时在dist下已经打包出了ma.min.js文件，其中includes方法也被做了polyfill处理。

8、为什么使用了ts-loader后还要使用babel-loader

ts-loader也可以直接打包成es5语法，但不会做polyfill，况且如果项目依赖babel生态中的其他插件，也需要使用babel-loader.

原文出处：https://www.cnblogs.com/zczhangcui/p/11060545.html

2.1、环境配置-AngularJS2 TypeScript 环境配置

本章节使用的是 TypeScript 来创建 Angular 的应用，这也是官方推荐使用的，本教程的实例也将采用 TypeScript 来编写。

TypeScript 是一种由微软开发的自由和开源的编程语言，它是JavaScript的一个超集，扩展了JavaScript的语法。

如果你不了解TypeScript，可以查阅以下资料：

• TypeScript 入门教程
• TypeScript 中文手册

这开始前，你需要确保你已经安装了 npm，如果你还没安装npm或者不了解 npm 可以查看我们的教程：NPM 使用介绍。

由于 npm 官网镜像国内访问太慢，这里我使用了淘宝的npm镜像，安装方法如下：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

执行后我们就可以使用 cnpm 命令来安装模块：

$ cnpm install

第一步：创建与配置项目

创建目录

$ mkdir angular-quickstart
$ cd angular-quickstart

创建配置文件

Angular 项目需要以下几个配置文件：

• package.json标记本项目所需的 npm 依赖包。
• tsconfig.json定义了 TypeScript 编译器如何从项目源文件生成 JavaScript 代码。
• typings.json为那些 TypeScript 编译器无法识别的库提供了额外的定义文件。
• systemjs.config.js为模块加载器提供了该到哪里查找应用模块的信息，并注册了所有必备的依赖包。 它还包括文档中后面的例子需要用到的包。a

在 angular-quickstart 中创建以下几个文件，代码如下所示：

package.json 文件：

{
  "name": "angular-quickstart","version": "1.0.0","scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ","lite": "lite-server","postinstall": "typings install","tsc": "tsc","tsc:w": "tsc -w","typings": "typings"
  },"license": "ISC","dependencies": {
    "@angular/common": "2.0.0","@angular/compiler": "2.0.0","@angular/core": "2.0.0","@angular/forms": "2.0.0","@angular/http": "2.0.0","@angular/platform-browser": "2.0.0","@angular/platform-browser-dynamic": "2.0.0","@angular/router": "3.0.0","@angular/upgrade": "2.0.0","core-js": "^2.4.1","reflect-Metadata": "^0.1.3","rxjs": "5.0.0-beta.12","systemjs": "0.19.27","zone.js": "^0.6.23","angular2-in-memory-web-api": "0.0.20","bootstrap": "^3.3.6"
  },"devDependencies": {
    "concurrently": "^2.2.0","lite-server": "^2.2.2","typescript": "^2.0.2","typings":"^1.3.2"
  }
}

tsconfig.json 文件：

{
  "compilerOptions": {
    "target": "es5","module": "commonjs","moduleResolution": "node","sourceMap": true,"emitDecoratorMetadata": true,"experimentalDecorators": true,"removeComments": false,"noImplicitAny": false
  }
}

typings.json 文件：

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759","jasmine": "registry:dt/jasmine#2.2.0+20160621224255","node": "registry:dt/node#6.0.0+20160909174046"
  }
}

systemjs.config.js 文件：

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },// map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',// angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js','@angular/common': 'npm:@angular/common/bundles/common.umd.js','@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js','@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js','@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js','@angular/http': 'npm:@angular/http/bundles/http.umd.js','@angular/router': 'npm:@angular/router/bundles/router.umd.js','@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',// other libraries
      'rxjs':                       'npm:rxjs','angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',},// packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',defaultExtension: 'js'
      },rxjs: {
        defaultExtension: 'js'
      },'angular2-in-memory-web-api': {
        main: './index.js',defaultExtension: 'js'
      }
    }
  });
})(this);

接下来我们使用 cnpm 命令来安装依赖包：

$ cnpm install

执行成功后，angular-quickstart 目录下就会生成一个 node_modules 目录，这里包含了我们这个实例需要的模块，我们可以看下项目的目录结构：

第二步：创建应用

我们用 NgModules 把 Angular 应用组织成了一些功能相关的代码块。

Angular 本身是被拆成一些独立的 Angular 模块，这样我们在应用中只需要导入需要的 Angular 部分。

每个 Angular 应用至少需要一个root module(根模块)，实例中为 AppModule 。

接下来我们在 angular-quickstart 目录下创建 app 目录：

$ mkdir app
$ cd app

然后在 app 目录下创建 app.module.ts 文件，代码如下所示：

app.module.ts 文件：

import { NgModule }      from '@angular/core';
import { browserModule } from '@angular/platform-browser';
 
@NgModule({
  imports:      [ browserModule ]
})
export class AppModule { }

由于 QuickStart 是一个运行在浏览器中的 Web 应用，所以根模块需要从 @angular/platform-browser 中导入 browserModule 并添加到 imports 数组中。

创建组件并添加到应用中

每个 Angular 应用都至少有一个根组件， 实例中为 AppComponent，app.component.ts 文件代码如下：

app.component.ts 文件：

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',template: '<h1>我的第一个 Angular 应用</h1>'
})
export class AppComponent { }

代码解析：

• 以上代码从angular2/core引入了Component包。

• @Component是 Angular 2 的装饰器，它会把一份元数据关联到 AppComponent 组件类上。

• my-app是一个 CSS 选择器，可用在 HTML 标签中，作为一个组件使用。

• @view包含了一个template，告诉 Angular 如何渲染该组件的视图。

• export指定了组件可以再文件外使用。

接下来我们重新打开 app.module.ts 文件，导入新的 AppComponent ，并把它添加到 NgModule 装饰器的 declarations 和 bootstrap 字段中：

app.module.ts 文件：

import { NgModule }      from '@angular/core';
import { browserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
@NgModule({
  imports:      [ browserModule ],declarations: [ AppComponent ],bootstrap:    [ AppComponent ]
})
export class AppModule { }

第四部：启动应用

接下来我们需要告诉 Angular 如何启动应用。

在 angular-quickstart/app 目录下创建 main.ts 文件，代码如下所示：

main.ts 文件：

import { platformbrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
 
const platform = platformbrowserDynamic();
platform.bootstrapModule(AppModule);

以上代码初始化了平台，让你的代码可以运行，然后在该平台上启动你的 AppModule。

定义该应用的宿主页面

在 angular-quickstart 目录下创建 index.html 文件，代码如下所示：

index.html 文件：

<html>
  <head>
    <title>Angular 2 实例 - 菜鸟教程(runoob.com)</title>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. 载入库 -->
    <!-- IE 需要 polyfill -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-Metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. 配置 SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. 显示应用 -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

这里值得注意的地方有：

添加一些样式

我们可以在 angular-quickstart 目录的 styles.css 文件中设置我们需要的样式：

styles.css 文件：

/* Master Styles */
h1 {
  color: #369;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 250%;
}
h2,h3 {
  color: #444;
  font-family: Arial,sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}

第六步：编译并运行应用程序

打开终端窗口，输入以下命令：

npm start

访问 http://localhost:3000/，浏览器显示结果为：

这样我们的第一个 Angular2 的应用就算创建完成了，最终的目录结构为：

本文所使用的源码可以通过以下方式下载，不包含 node_modules 和 typings 目录。

源代码下载

javascript – 使用Typescript和Webpack的Fabric.js：Canvas不是构造函数

result.js:198 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_1_fabric___default.a.Canvas is not a constructor

import fabric from "fabric";
const canvas = new fabric.Canvas('my-canvas');

var canvas = new __WEBPACK_IMPORTED_MODULE_1_fabric__default.a.Canvas('my-canvas');

const canvas = new fabric.fabric.Canvas('my-canvas');

import * as fabric from "fabric";
const canvas = new fabric.Canvas('my-canvas');

var canvas = new __WEBPACK_IMPORTED_MODULE_1_fabric__["Canvas"]('my-canvas');

import {Canvas} from "fabric";
const canvas = new Canvas('my-canvas');

var canvas = new __WEBPACK_IMPORTED_MODULE_1_fabric__["Canvas"]('my-canvas');

   .webpackConfig({
    module: {
        rules: [
            {
                test: /\.js$/,loader: 'babel-loader',include: [
                    path.resolve('app/public/js'),path.resolve('node_modules/countable')
                ],},{
                test: /\.vue$/,loader: 'vue-loader',exclude: [
                    path.resolve('resources/assets/ts/components')
                ],options: {
                    loaders: {
                        'scss': 'vue-style-loader!css-loader!sass-loader','sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',}
                }
            },{
                test: /\.tsx?$/,loader: 'ts-loader',exclude: /node_modules/,options: {
                    appendTsSuffixTo: [/\.vue$/],}
            },]
    },plugins: [
        new webpack.ProvidePlugin({
            '_': 'lodash','$': 'jquery','jQuery': 'jquery','window.jQuery': 'jquery',}),new LiveReloadplugin()
    ],resolve: {
        extensions: ['.js','.ts','.vue','.jsx','.tsx','.vuex'],alias: {
            'vue$': 'vue/dist/vue.esm.js',}
    }

import 'fabric' ;
declare let fabric: any;

var c = new fabric.Canvas('myCanvas') ;

Material-UI + React + Babel + Webpack 环境配置

$ mkdir hello-material-ui
$ cd hello-material-ui
$ npm init

$ npm install --save react react-dom react-tap-event-plugin material-ui
$ npm install --save-dev babel-core babel-loader 
$ npm install --save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-1
$ npm install --save-dev webpack

"dependencies": {
    "material-ui": "^0.15.0","react": "^15.0.0","react-dom": "^15.0.0","react-tap-event-plugin": "^1.0.0" },"devDependencies": {
    "babel-core": "^6.8.0","babel-loader": "^6.2.4","babel-preset-es2015": "^6.6.0","babel-preset-react": "^6.5.0","babel-preset-stage-1": "^6.5.0","webpack": "^1.13.0" }

"babel": {
    "presets": [ "es2015","react","stage-1" ],"plugins": [] }

{
  "presets": [ "es2015","plugins": [] }

var path = require('path');

module.exports = {
    entry: './entry.js',output: {
        path: path.join(__dirname,'/dist'),filename: 'bundle.js'
    },resolve: {
        extensions: ['','.js','.jsx']
    },module: {
        loaders: [
            { test: /\.jsx?$/,loaders: ['babel'] }
        ]
    }
}

"scripts": {
    "build": "webpack","build-dev": "webpack -w -d" }

$ npm run build

$ npm run build-dev

<!doctype html>
<html>
    <head>
        <Meta charset="utf-8" />
    </head>
    <body>
        <script src="dist/bundle.js"></script>
    </body>
</html>

import React from 'react';
import ReactDOM from 'react-dom';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}> <AppBar title="Hello,Material-UI!" /> </MuiThemeProvider> ); let app = document.createElement('div'); ReactDOM.render(<App />,app); document.body.appendChild(app);

$ npm run build

Hash: bc7d93c87854ed7f539e
Version: webpack 1.13.0
Time: 11389ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.12 MB       0  [emitted]  main
    + 301 hidden modules

React + Typescript + Webpack 开发环境配置

对于复杂或多人开发的 React 项目来说，管理和使用每个组件的 props 、 state 或许会成为一件让人头痛的事情，而为每一个组件写文档，成本也会比较大，对项目的开发效率也不是最理想的。

Typescript 给 React 带来很多好处：

• 在组件头部定义 interface，让每个人在拿到组件的第一时间就可以很明确知道该组件需要使用的 props 和 state；

• 在编译中发现问题，减少运行时的报错；

• 可以在编辑器中实现实时类型校验、引用查询；

• 约束类型，在混合多语言环境中降低风险，等。

且配置也是非常简单，步骤如下。

文件目录

.
├── build # 前端配置文件
│   ├── index.html
│   ├── webpack.config.js
├── app # 前端目录
├── .gitignore
├── package.json
├── tsconfig.json
└── tslint.json

配置流程

创建项目

mkdir my-project && cd my-project
npm init

安装依赖

npm i -g webpack webpack-dev-server
npm i --save react react-dom @types/react @types/react-dom
npm i --save-dev ts-loader source-map-loader
npm link webpack webpack-dev-server typescript

配置 webpack

/* build/webpack.config.js */
const config = {
  entry: ''./app/index.tsx'',
  output: {
    filename: ''app.bundle.js'',
    path: ''./public'',
    publicPath: ''/assets''
  },
  devtool: ''source-map'',
  resolve: {
    extensions: ['''', ''.webpack.js'', ''.web.js'', ''.ts'', ''.tsx'', ''.js'']
  },
  module: {
    loaders: [
      {
        test: /\.tsx?$/,
        loader: ''ts-loader''
      }
    ],
    preLoaders: [
      {
        test: /\.js$/,
        loader: ''source-map-loader''
      }
    ]
  },
  devtool: ''eval''
}

module.exports = config

配置 tsconfig

/* tsconfig.json */

{
    "compilerOptions": {
        "outDir": "./public/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react"
    },
    "files": [
        "./app/index.tsx"
    ]
}

至此，基本配置已经完成，后面创建好一个入口页面和entry文件就可以跑起来了：

/* build/index.html */

<!doctype html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>Hello world</title>
    <script src="http://localhost:8080/webpack-dev-server.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script src="assets/app.bundle.js"></script>
  </body>
</html>

/* app/index.tsx */
import * as React from ''react''
import { render } from ''react-dom''

interface IAppProps {}
interface IAppState {}

class App extends React.Component<IAppProps, IAppState> {
  public render(): JSX.Element {
    return (
      <div>
        Hello world
      </div>
    )
  }
}

render(<App />, document.getElementById(''app''))

启动项目

webpack-dev-server --inline --config build/webpack.config.js --content-base build --open

出来吧神龙

简单的说明

Webpack 配置

Webpack配置其实是一件很简单的事情，这也是他具备强大竞争力的重要因素。
从配置文件中可以看出，里面无非就是entry、output和loader，如果需要编译CSS，在loader里面加一个即可：

npm i --save-dev style-loader css-loader

/* build/webpack.config.js */
const config = {
  // ...
  module: {
    loaders: [
      {
        test: /\.css/,
        loader: ''style-loader!css-loader''
      }
    ],
    // ...
  },
  // ...
}

项目启动

项目启动的命令过长，放进 package.json 的 scripts 就好了：

/* package.json */

{
  "scripts": {
    "dev": "webpack-dev-server --inline --config build/webpack.config.js --content-base build --open",
  },
}

再执行以下命令试试：

npm run dev

tslint

在开发中如果有个约束代码的工具能够让代码更加优雅，以前用的是 eslint，如果用 .tsx 就不能生效了，这里推荐使用 tslint ：

npm i -g tslint
cd my-project
tslint --init

这样会在项目文件中创建一个现成的 tslint 配置文件： tslint.json ，个性化方案可以自行设置。

参考

webpack 新官网
webpack dev server
tsconfig.json 配置文档
style-loader
tslint

原文

原文地址：React + Typescript + Webpack 开发环境配置
文章作者：Heleth
版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证） 转载请注明出处

今天的关于webpack + typescript + babel打包*.min.js文件的环境配置和webpack打包后的js怎么调试的分享已经结束，谢谢您的关注，如果想了解更多关于2.1、环境配置-AngularJS2 TypeScript 环境配置、javascript – 使用Typescript和Webpack的Fabric.js：Canvas不是构造函数、Material-UI + React + Babel + Webpack 环境配置、React + Typescript + Webpack 开发环境配置的相关知识，请在本站进行查询。