webpack 捆綁 typescript 到 ts-loader 但獲取模塊未在瀏覽器上定義？

Question

按照 webpack typescript 文檔

當我使用 webpack ts-loader 轉換 typescript 時它無法工作，因為模塊未定義？

但是當我只是命令 tsc 時，這個結果可以在瀏覽器上運行

這個問題也已經使用 gulp 來修復

但是 gulp 使用 browserify 來轉換 typescript

所以我想使用 webpack 來捆綁我的快遞服務器和客戶端打字稿！

為什么 webpack ts-loader 轉換 typescript 在瀏覽器上得到“模塊未定義”？

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

嗯......我知道為什么在瀏覽器上出現“模塊未定義”，因為我的 output 庫設置。

當我的項目完成后，我研究 webpack 文檔，一步一步檢查我的設置，我發現為什么我在瀏覽器上設置“commonjs2”（2??）？

Commonjs 不能立即在瀏覽器上運行，所以當我將 libraryTarget 設置為“var”時，同時設置 library:'myLibrary' 來調用 TS function，問題就解決了。

看看下面的設置

/* 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];

索引.ts

import { gogogo } from './import';


gogogo();

export { gogogo };

console.log('你好');

導入.ts

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

export {gogogo};

索引.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

使用 require.js 於 2020/06/30 更新

webpack.config.js

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

索引.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>