在我使用 Angular 的过程中，我被迫使用四种不同的方式来包含第 3 方库 poliglot.js (对于多语言)。
为了能够在我的 Lang 类中使用 new Polyglot(...):
export class Lang
{
...
constructor() {
this.polyglot = new Polyglot({ locale: 'en' });
...
}
...
}
我用这四种方法
A. 在我相当老的(2016 年)angular2(基于 framerwork angular2-webpack-starter)项目中(目前由于缺少 require 指令，该解决方案不起作用在新的 Angular 项目中):
var Polyglot = require('../../../node_modules/node-polyglot/build/polyglot.min.js');
B. 在我的下一个项目 angular4 中(基于 angular2-webpack-starter ):
import Polyglot from '../../../node_modules/node-polyglot/build/polyglot.min.js';
C. 在我最近嵌入到 Laravel 项目中的 angular5 项目中(基于 angular-cli )
import * as Polyglot from '../../../node_modules/node-polyglot/build/polyglot.min.js';
D. 我还找到了第 4 个解决方案，它适用于我的一些旧的 jQuery Angular 项目(基于 angular2-webpack-starter )(互联网上的人经常提到这个解决方案)但我写它使用 Polyglot 示例:
import '../../../node_modules/node-polyglot/build/polyglot.min.js';
declare var Polyglot: any;
// declare var $:any // this is for jquery (as example)
问题是:这四种解决方案有什么区别，它们是如何工作的？是什么导致在某些项目中一种解决方案有效而其他解决方案无效？
最佳答案
所以让我们分解一下:
A:仍然可以在任何 Angular 版本中工作，你只需要在使用它之前声明 require 即可。
declare const require: any;
const Polyglot = require('../../../node_modules/node-polyglot/build/polyglot.min.js');
B:A点使用CommonJS模块系统加载依赖，其他点使用ES6动态导入系统(可以像commonjs模块系统一样使用，默认为webpack)。如果库公开模块，则可以直接导入 Polyglot，例如
export class Polyglot {}
C: 如果 Polyglot 有多个成员你都不想使用你可以通过写入导入 Polyglot 的所有成员
import * as Polyglot from '../../../node_modules/node-polyglot/build/polyglot.min.js';
D:Polyglot 被导入但未绑定(bind)到任何变量。但是 Polyglot 公开了一个全局对象，在您声明它在其下可用的变量之前，您无权访问该对象。
参见 mdn reference为了更好的解释
根据您使用的构建系统，没有答案哪一个应该总是有效，但我的解决方案 A 应该适用于每个 webpack 构建以及 B 和 C。友情提醒，A 和 D 不是最佳解决方案，应该只如果没有其他方法导入/使用模块，则使用。
编辑: ES6 standard只是描述什么是模块，它包含什么，模块应该如何exported和 imported等等。
所以 ES6 无法处理这些“旧”模块，因为它不是库或类似的东西。 CommonJS也只是一个标准，它由 Node.js 实现，您知道使用 require('module') 导入哪个模块。
所以 Webpack 可以帮助您处理这两个模块系统，因为它们实现了这两个模块系统。
如果您创建一个空项目并通过 webpack --env development 使用 webpack 构建，您可以看到 webpack 如何处理不同的模块。 Webpack 会编译你的代码，并为 ESModules 或 CommonJS 模块提供它自己处理的广告。根据他们找到的模块，他们将调用不同的方法。我添加了一个带有编译代码的示例。
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./main.js");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./esmodule.js":
/*!*********************!*\
!*** ./esmodule.js ***!
\*********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nvar MyClass = function MyClass() {\n _classCallCheck(this, MyClass);\n\n console.log('test');\n};\n\nexports.default = MyClass;\n\n//# sourceURL=webpack:///./esmodule.js?");
/***/ }),
/***/ "./main.js":
/*!*****************!*\
!*** ./main.js ***!
\*****************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\n\nvar test = _interopRequireWildcard(__webpack_require__(/*! ./esmodule.js */ \"./esmodule.js\"));\n\nfunction _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }\n\n__webpack_require__(/*! ./module */ \"./module.js\");\n\n//# sourceURL=webpack:///./main.js?");
/***/ }),
/***/ "./module.js":
/*!*******************!*\
!*** ./module.js ***!
\*******************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\n\nmodule.exports = {\n myFunction: function myFunction() {\n console.log('Test');\n }\n};\n\n//# sourceURL=webpack:///./module.js?");
/***/ })
/******/ });
//// main.js
require('./module')
import * as test from './esmodule.js';
//// esmodule.js
export default class MyClass{
constructor(){
console.log('test')
}
}
//// module.js
module.exports = {
myFunction: function () {
console.log('Test')
}
}
您可以看到 Webpack 创建了一个自执行函数，它获取所有已创建的模块及其 { id(pathToFile) : function(module, exports, __webpack_require__)。在 2 种不同的模块类型(ESModule、Module --> CommonJS)中，您可以看到 Webpack 以不同的方式处理这些类型。如果您想更深入地了解我可以再次编辑我的帖子。
关于javascript - 导入第三方js文件到angular typescript项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50516233/
我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看rubyzip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d
我试图在一个项目中使用rake，如果我把所有东西都放到Rakefile中，它会很大并且很难读取/找到东西，所以我试着将每个命名空间放在lib/rake中它自己的文件中，我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题，但没有任务。我现在只有一个.rake文件作为测试，名为“servers.rake”，它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时
我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，
Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题
对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl
我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚
如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
好的，所以我的目标是轻松地将一些数据保存到磁盘以备后用。您如何简单地写入然后读取一个对象？所以如果我有一个简单的类classCattr_accessor:a,:bdefinitialize(a,b)@a,@b=a,bendend所以如果我从中非常快地制作一个objobj=C.new("foo","bar")#justgaveitsomerandomvalues然后我可以把它变成一个kindaidstring=obj.to_s#whichreturns""我终于可以将此字符串打印到文件或其他内容中。我的问题是，我该如何再次将这个id变回一个对象？我知道我可以自己挑选信息并制作一个接受该信
我正在编写一个小脚本来定位aws存储桶中的特定文件，并创建一个临时验证的url以发送给同事。(理想情况下，这将创建类似于在控制台上右键单击存储桶中的文件并复制链接地址的结果)。我研究过回形针，它似乎不符合这个标准，但我可能只是不知道它的全部功能。我尝试了以下方法:defauthenticated_url(file_name,bucket)AWS::S3::S3Object.url_for(file_name,bucket,:secure=>true,:expires=>20*60)end产生这种类型的结果:...-1.amazonaws.com/file_path/file.zip.A