我如何在另一个JavaScript文件中添加一个JavaScript文件,类似于CSS中的 @import?


当前回答

您也可以使用 gulp, gulp-concat, gulp-typescript with /// <reference path= 包括:

{
  "scripts": {
    "gulp": "gulp main"
  },
  "dependencies": {
    "@types/gulp": "^4.0.6",
    "@types/gulp-concat",
    "@types/gulp-typescript",
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-resolve-dependencies": "^3.0.1",
    "gulp-typescript": "^6.0.0-alpha.1",
    "typescript": "^3.7.3"
  }
}

文件 src/someimport.ts

class SomeClass {
    delay: number;
}

/// <reference path="./someimport.ts" />

someclass = new SomeClass();
someclass.delay = 1;

var gulp = require("gulp");
var concat = require('gulp-concat');
var resolveDependencies = require('gulp-resolve-dependencies');

var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");

gulp.task("main", function() {
  return gulp
    .src(["src/main.ts"])
    .pipe(resolveDependencies({
      pattern: /^\s*\/\/\/\s*<\s*reference\s*path\s*=\s*(?:"|')([^'"\n]+)/gm
    }))
    .on('error', function(err) {
        console.log(err.message);
    })
    .pipe(tsProject())
    .pipe(concat('main.js'))
    .pipe(gulp.dest("build/"));
});

如果您想针对所有 TypeScript 项目文件而不是仅是 src/main.ts,您可以取代以下文件:

  return gulp
    .src(["src/main.ts"])
    .pipe(resolveDependencies({
    ...
// -->
  return tsProject
    .src()
    .pipe(resolveDependencies({
    ...

如果您不想使用 TypeScript,您可以使用此简化 gulpfile.js 并从 package.json 中删除所有包含的 TypeScript:

圖片來源:Gulpfile.js

var gulp = require("gulp");
var concat = require('gulp-concat');
var resolveDependencies = require('gulp-resolve-dependencies');

gulp.task("main", function() {
  return gulp
    .src(["src/main.js"])
    .pipe(resolveDependencies({
      pattern: /^\s*\/\/\/\s*<\s*reference\s*path\s*=\s*(?:"|')([^'"\n]+)/gm
    }))
    .on('error', function(err) {
        console.log(err.message);
    })
    .pipe(concat('main.js'))
    .pipe(gulp.dest("build/"));
});

{
  "scripts": {
    "gulp": "gulp main"
  },
  "dependencies": {
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-resolve-dependencies": "^3.0.1"
  }
}

class SomeClass {
}
/// <reference path="./someimport.ts" />
someclass = new SomeClass();
someclass.delay = 1;

<html>
    <head>
        <script src="main.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            console.log(someclass.delay);
        </script>
    </body>
</html>

TypeScript: Gulp 我可以使用 TypeScript 没有 RequireJS? 需要使用 Node.js 上的 Gulp.js 客户端使用另一个 JavaScript 文件的主要文件的简单折叠: 没有折叠的参考错误: 需要没有定义 如何使用 Gulp.js 编写 TypeScript 浏览器 Node.js 模块? 使用 babel 使用文件的折叠 如何在浏览器中“要求” CommonJS 模块? 有没有替代的浏览器

其他回答

雖然這些答案很棒,但有一個簡單的「解決方案」已經存在,因為脚本充電存在,它將覆蓋大多數人使用案例的99.999%。

<!DOCTYPE HTML>
<html>
    <head>
        <script src="script1.js"></script>
        <script src="script2.js"></script>
    </head>
    <body></body>
</html>

如果脚本2需要脚本1,这实际上是做这样的事情的绝对最简单的方式,我很惊讶,没有人带来了这一点,因为这是最明显和最简单的答案,几乎每个案例都会适用。

最好使用 jQuery 方式. 要延迟已准备的事件,首先拨打 $.holdReady(真实)。

$.holdReady(true);
$.getScript("myplugin.js", function() {
    $.holdReady(false);
});

或者,而不是按时包含,请在上传之前使用脚本进行编辑。

我使用Sprockets(我不知道是否有其他人)。您将您的JavaScript代码建立在单独的文件中,并包含由Sprockets引擎处理的评论。

也看:

引入Sprockets:JavaScript依赖管理和折磨

在这里展示的大多数解决方案都意味着动态加载. 我正在寻找一个编译器,将所有依赖的文件集成到一个单一的输出文件. 相同的Less/Sass预处理器处理CSS @import在规则上. 因为我找不到任何值得这个类型的东西,我写了一个简单的工具解决问题。

因此,这里是编译器, https://github.com/dsheiko/jsic,它取代 $import(“文件路径”)与请求的文件内容安全。

主 / 主 / JS

var foo = $import("./Form/Input/Tel");

src / 表格 / 输入 / Tel.js

function() {
    return {
          prop: "",
          method: function(){}
    }
}

现在我们可以运行编辑器:

node jsic.js src/main.js build/mail.js

接收合并文件

主 / 主 / JS

var foo = function() {
    return {
          prop: "",
          method: function(){}
    }
};
var js = document.createElement("script");

js.type = "text/javascript";
js.src = jsFilePath;

document.body.appendChild(js);