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。

我想要什么

使用TypeScript
如果可能，对浏览器和节点
投资于未来几个月不会死亡的事情
更加模块化（可能有人只需要lib的一部分）

令我困惑的是

我在TypeScript中找到了两种不同的模块处理：

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

和

import c = require('./y')

我从节点习惯了后者，但第一个看起来像ES6（可能是未来）。

目前我使用的是tsc --module commonjs，但这只是输出格式，对吧？还有--module system但我找不到此选项的文档，当我使用它时，编译器抱怨export = ...是不允许的。

尚未使用browserify，tsify，watchify，jspm，SystemJS，webpack - 它太相似和太多了，但我认为这些工具中的一个或几个可以为我做这项工作。

当我require(<a node module living in node_modules>)时，tsc找不到模块：“TS2307：找不到外部模块'时刻'”。

具体问题

我应该在我的代码中使用哪种模块语法来最好地使用Node和Browser？
哪个工具链会解决我的要求？我可以从中复制示例项目或样板吗？（我也对Gulp持开放态度，不必使用Grunt）。
目前支持哪些TypeScript和Node版本？我在IntelliJ中嵌入了1.4，当引用1.6.2作为外部我得到非常深刻的错误消息，如“TypeError：host.fileExists不是一个函数”（没有找到任何有用的东西）。也许使用Node v4.1.1不是最佳的？

对不起，这篇文章太复杂了。如有必要，请告诉我从哪里开始或者最重要的事情是改变或开始。

Answer 1

我应该在代码中使用哪种模块语法来最好地使用Node和Browser？

如果你的目标是es5，那么两种语法都会编译成有效的相同内容。使用其中之一，随意混合搭配。

哪个工具链能解决我的要求？是否有可以从
复制的示例项目或样板文件

我使用（并推荐）webpack。您可以按原样使用commonjs / nodejs，然后webpack可以为前端创建捆绑包。有关示例，请参阅https://github.com/basarat/tsb/tree/master

目前支持哪些TypeScript和Node版本？我在IntelliJ中嵌入了1.4，当引用1.6.2作为外部我得到非常深刻的错误消息，如“TypeError：host.fileExists不是一个函数”（没有找到任何有用的东西）。也许使用Node v4.1.1不是最佳的？

使用最新的TypeScript（TypeStrong的各种工具，例如atom-typescript / grunt-ts / ts-loader支持）。您收到的错误是Webstorm错误，应该向他们报告。（我使用atom-typescript）。

Answer 2

我还有WebStorm 10的 TypeError：host.fileExists 错误和自定义的Typescript编译器（通过npm安装）。

然而，这在WebStorm 11中已经修复（2015年11月2日发布） https://www.jetbrains.com/webstorm/download/

Answer 3

这是我使用webpack和babel获得它的方式：

我的index.ts文件位于src文件夹内

package.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"
  }
}

tsconfig.json

{
  "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

参考：

编写TypeScript并为Browser和Node发出一个库

3 个答案: