webpack 将 typescript 捆绑到 ts-loader 但获取模块未在浏览器上定义？

Question

follow webpack typescript doc

当我使用 webpack ts-loader 转换打字稿时，它无法工作，因为模块未定义？

但是当我只命令 tsc 时，这个结果可以在浏览器上运行

另外这个问题已经用 gulp 修复了

但gulp 使用 browserify 转换 typescript

所以我想使用 webpack 来捆绑我的 express 服务器和客户端 typescript！

为什么 webpack ts-loader 转换 typescript 在浏览器上得到 "module is not defined"？

this repositories on github

webpack.config.js

const nodeeExternals = require('webpack-node-externals');
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const serverConfig = {
  target: 'node',
  devtool: 'eval-source-map',
  node: {
    __dirname: false,
    __filename: true,
  },
  externals: [nodeExternals()],
  entry: {
    'index': './src/index.js',
    // 'public/javascripts/temibroad': './src/client/typescript/temibroad/temibroad.ts'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].bundle.js',
    libraryTarget: 'commonjs2',
  },
  module: {   //設定你的檔案選項
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ],
  },
  // plugins: [
  //   new CopyWebpackPlugin([
  //     { from: 'src/client/views', to: 'views' },
  //     { from: 'src/client/static', to: 'public' },
  //   ])
  // ],
  optimization: {
    minimize: true,
  }
}

const clientConfig = {
  target: 'web',
  devtool: 'eval-source-map',
  node: {
    __dirname: false,
    __filename: true,
  },
  externals: [nodeExternals()],
  entry: {
    // 'index': './src/index.js',
    'public/javascripts/temibroad': './src/client/typescript/temibroad/temibroad.ts'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].bundle.js',
    libraryTarget: 'commonjs2',
  },
  module: {   //設定你的檔案選項
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  },
  plugins: [
    new CopyWebpackPlugin([
      { from: 'src/client/views', to: 'views' },
      { from: 'src/client/static', to: 'public' },
    ])
  ],
  optimization: {
    minimize: true,
  }
}



module.exports = [serverConfig, clientConfig];

tsconfig.json

{
  "compilerOptions": {
  "target": "es5",
  "module": "commonjs",
  "sourceMap": true,
  "noEmitOnError" : false,
  "strict": true,
  "noImplicitAny": true,
  "strictNullChecks": true,
  "esModuleInterop": true,
  "forceConsistentCasingInFileNames": true
  }
}

Answer 1

嗯...我知道为什么在浏览器上出现“模块未定义”，原因是我的输出库设置。

当我的项目完成后，我研究了 webpack 文档，逐步检查我的设置，我发现为什么我在浏览器上设置“commonjs2”(2??)？

Commonjs 不能立即在浏览器上运行，所以当我将 libraryTarget 设置为“var”，同时设置 library:'myLibrary' 来调用 TS 函数时，问题就解决了。

查看下面的设置

/* webpack.config.js ： Webpack 的設定檔 */
// const webpack = require('webpack');
const path = require('path');

const clientConfig = {
  target: 'web',
  devtool: 'eval-source-map',
  entry: {
    // 'index': './src/index.js',
    'index': './src/index.ts'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].bundle.js',
    library :'aaa',
    libraryTarget: 'var'
  },
  module: {   //設定你的檔案選項
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  },
}

module.exports = [clientConfig];

index.ts

import { gogogo } from './import';


gogogo();

export { gogogo };

console.log('你好');

import.ts

function gogogo(str = 'gogogog'){
  console.log(str);
}

export {gogogo};

index.html

<script src="./dist/index.bundle.js"></script>
<script>
  console.log(aaa);
  aaa.gogogo('外面傳入');
</script>

浏览器控制台

gogogog             import.ts?661f:6
好                  index.ts?71bd:7
{__esModule: true}  index.html:11 
外面傳入             import.ts?661f:6

2020/06/30 更新 require.js

webpack.config.js

  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].bundle.js',
    // library :'aaa',
    libraryTarget: 'amd'
  },

index.html

  <script src='https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js'></script>
  <script>
    require(['./dist/index.bundle'], function(aaa){
      console.log(aaa);
      aaa.gogogo('from aaa');
    })
  </script>

webpack 将 typescript 捆绑到 ts-loader 但获取模块未在浏览器上定义？

webpack bundle typescript to ts-loader but get module is not defined on browser?

typescript

webpack

ts-loader