編寫 TypeScript 並為瀏覽器和節點發出一個庫

Question

我有一個在 Node.js 和瀏覽器中使用的內部庫。 它有許多文件，與 Grunt 任務和不同的序言連接在一起，一個用於瀏覽器，一個用於 Node：

瀏覽器：

// dependent 3rd-party libs like Mustache are already global
window.myLib = { /*just a namespace object filled with stuff later*/ }

// then comes the plain javascript which just adds elements to myLib.
// This part is identical to that used in Node
// example:
myLib.renderPartDetail = function (...) {...};

節點：

var Mustache = require('mustache');
var myLib = {};
module.exports = myLib;

// then comes the plain javascript which just adds elements to myLib.
// This part is identical to that used in Browser

這會產生 2 個不同的單輸出 js 文件，一個用於瀏覽器，一個用於 Node.js。

我想要什么

• 使用打字稿
• 如果可能，瀏覽器和節點只使用一種 CommonJS 語法（或 ES6 模塊）
• 投資於未來幾個月不會消亡的東西
• 更加模塊化（也許有人只需要 lib 的一部分）

什么讓我困惑

我在 TypeScript 中發現了 2 種不同類型的模塊處理：

import {a, b} from './x'

和

import c = require('./y')

我在 node 中習慣了后者，但第一個看起來像 ES6（可能是未來）。

目前我使用tsc --module commonjs但這只是輸出格式，對嗎？ 還有--module system但我找不到這個選項的文檔，當我使用它時，編譯器抱怨export = ...是不允許的。

尚未打得四處browserify ， tsify ， watchify ， jspm ，SystemJS， webpack -它太相似，太多了，但我覺得一個或幾個這些工具可以為我做的工作。

當我require(<a node module living in node_modules>) ，tsc 找不到模塊：“TS2307：找不到外部模塊‘時刻’”。

具體問題

• 我應該在我的代碼中使用哪種模塊語法才能最好地與 Node 和瀏覽器配合使用？
• 哪個工具鏈可以解決我的需求？ 是否有我可以從中復制的示例項目或樣板？ （我也對 Gulp 持開放態度，不必使用 Grunt）。
• 當前支持哪些 TypeScript 和 Node 版本？ 我在 IntelliJ 中嵌入了 1.4，當將 1.6.2 引用為外部時，我收到了非常深奧的錯誤消息，例如“TypeError: host.fileExists is not a function”（找不到任何對此有幫助的信息）。 也許使用 Node v4.1.1 不是最佳選擇？

很抱歉這篇文章太復雜了。 如有必要，請告訴我從哪里開始，或者最重要的改變或開始的事情。

Answer 1

我應該在我的代碼中使用哪種模塊語法才能最好地與 Node 和瀏覽器配合使用？

如果您的目標是es5那么兩種語法都會編譯為有效的相同內容。 使用任何一種，並隨意混合搭配。

哪個工具鏈可以解決我的需求？ 是否有我可以從中復制的示例項目或樣板

我使用（並推薦）webpack。 您可以按原樣使用 commonjs / nodejs，然后 webpack 可以為前端創建包。 有關示例，請參閱https://github.com/basarat/tsb/tree/master

當前支持哪些 TypeScript 和 Node 版本？ 我在 IntelliJ 中嵌入了 1.4，當將 1.6.2 引用為外部時，我收到了非常深奧的錯誤消息，例如“TypeError: host.fileExists is not a function”（找不到任何對此有幫助的信息）。 也許使用 Node v4.1.1 不是最佳選擇？

使用最新的 TypeScript（來自 TypeStrong 的各種工具，例如 atom-typescript/grunt-ts/ts-loader 支持）。 你得到的錯誤是一個 webstorm 錯誤，應該報告給他們。 （我使用原子打字稿）。

Answer 2

我也有 WebStorm 10 和自定義 Typescript 編譯器（通過 npm 安裝）的TypeError: host.fileExists錯誤。

但是，這在 WebStorm 11 （2015 年 11 月 2 日發布）中得到了修復https://www.jetbrains.com/webstorm/download/

Answer 3

這是我使用 webpack 和 babel 得到它的方式：

我的index.ts文件在src文件夾內

包.json

{
  "scripts": {
    "bundle-dev" : "rimraf dist && tsc --outDir dist/temp && webpack --env.development --display-error-details && rimraf dist/temp",
    "bundle-prod": "rimraf dist && tsc --outDir dist/temp && webpack --env.production  --display-error-details && rimraf dist/temp"
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/plugin-transform-reserved-words": "^7.10.4",
    "@babel/plugin-transform-typescript": "^7.11.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "@babel/plugin-syntax-flow": "^7.10.4",
    "@babel/preset-env": "^7.11.5",
    "babel-loader": "^8.1.0",
    "esmify": "^2.1.1",
    "rimraf": "^3.0.2",
    "ts-loader": "^8.0.4",
    "ts-node": "^8.10.2",
    "typescript": "^3.9.7",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  }
}

配置文件

{
  "compilerOptions": {
    "module": "AMD",
    "target": "ES5",
    "declaration": true,
    "outDir": "dist/my-javascript-package",
    "moduleResolution": "node"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "src/**/*"
  ]
}

.babelrc

{
    "plugins": [
        "transform-class-properties",
        "@babel/plugin-syntax-flow",
        "@babel/plugin-transform-reserved-words",
        "@babel/plugin-transform-typescript"
    ]
}

webpack.config.js

const path = require('path');

module.exports = env => {
    const mode = env.production ? 'production' : 'development';

    const config = (target) => {
        return {
            entry: {
                index: './src/index.ts'
            },
            target: target,
            output: {
                path: path.resolve(__dirname, "dist/my-javascript-package"),
                filename: target+'.js',
                library: 'MyJavaScriptPackage',
                libraryTarget: "umd",
                umdNamedDefine: true,
                globalObject: 'this',
            },
            plugins: [
                new (require('webpack')).DefinePlugin({
                    'process.env.NODE_ENV': JSON.stringify(mode)
                }),
            ],
            mode: mode,
            resolve: {
                extensions: ['.ts', '.js', '.json']
            },
            module: {
                rules: [
                    {
                        test: /\.ts$/,
                        exclude: /node_modules/,
                        use: [
                            {
                                loader: "babel-loader",
                                options: {
                                    presets: [
                                        [
                                            "@babel/preset-env",
                                            {
                                                "targets": {
                                                    "browsers":["last 2 versions"],
                                                    "node":"current"
                                                }
                                            }
                                        ]
                                    ],
                                },
                            },
                            {
                                loader: "ts-loader",
                            },
                        ],
                    },
                ],
            },
        };
    };

    return [config('node'), config('web')]
};

捆綁它

npm run bundle-dev

或者

npm run bundle-prod 

進口

import {MyJavaScriptPackage} from "my-javascript-package/node";
//or 
import {MyJavaScriptPackage} from "my-javascript-package/web"; // SPA example

參考：

• https://itnext.io/how-to-build-and-publish-npm-packages-with-webpack-dea19bb14627
• https://webpack.js.org/concepts/
• https://stackoverflow.com/a/46633682/4508758
• https://stackoverflow.com/a/49639482/4508758
• https://stackoverflow.com/a/52092788/4508758
• https://stackoverflow.com/a/51737190/4508758
• 和別的