[英]Import, Require? How to Mash Javascript Files Together?
This is vague - I apologize in advance, I am trying to be as succinct as I can with my limited understanding, while exposing my potentially incorrect assumptions. 这是模糊的-我先向您道歉,在我暴露自己潜在的错误假设的同时,我会尽我所能表达的简洁。
I have a website that's literally one huge HTML file. 我有一个实际上是一个巨大的HTML文件的网站。 It runs scripts defined in-line in a
<scripts>
tag. 它运行在
<scripts>
标记中内联定义的<scripts>
。
My goal is to move all the scripts into individual .js
files and pull them into index.html
(or into one another where required). 我的目标是将所有脚本移动到单独的
.js
文件中,然后将它们拉入index.html
(或在需要时彼此拉入)。 I am familiar with the usage of Node's require
and I am familiar with import , as used in Angular. 我熟悉Node的
require
的用法 ,也熟悉Angular中使用的import 。 I stress usage because I don't really know how they work. 我强调用法,因为我真的不知道它们是如何工作的。
Assumption 1 : I cannot use require
- it is purely for Node.js. 假设1:我不能使用
require
-这纯粹是Node.js的 The reason I bring it up is that I am pretty sure I have seen require in AngularJS 1.5
code, so assuming makes me uncomfortable. 我提出这个问题的原因是,我很确定我已经在
AngularJS 1.5
代码中看到了require,所以假设使我感到不舒服。 I am guessing this was stitched together by WebPack, Gulp, or similar. 我猜这是由WebPack,Gulp或类似的公司缝合在一起的。
Assumption 2 : I should use import
, but import only works with a URL address, if I have my .js
hosted on a server or CDN, it will be be pulled. 假设2 :我应该使用
import
,但是import仅适用于URL地址,如果我的.js
托管在服务器或CDN上,它将被拉出。 BUT, I cannot give local pathing (on the server) here - index.html
will NOT automatically pull in the dependencies while being served. 但是,我不能给本地路径(在服务器上)在这里-
index.html
将不会在依赖关系自动拉而被服务。 I need npm/Webpack/other
to pre-compile my index.html
if I want the deps pulled in on the server. 如果需要将deps插入服务器,则需要
npm/Webpack/other
来预编译index.html
。
Assumption 3 : Pre-compiling into a single, ready-to-go, html file is the desired way to build things, because the file can be served quickly (assuming it's ready to go). 假设3 :预编译成单个html文件是构建事物的理想方法,因为可以快速提供文件(假定已准备就绪)。 I make the assumption with the recent trend of serving Markdown from CDNs, the appearance of the JAMstack , and the number of sites using Jekyll and such (though admittedly for traditional Jekyll sites).
我以最近从CDN提供Markdown服务的趋势, JAMstack的出现以及使用Jekyll等的站点数(尽管传统的Jekyll站点被承认)的趋势做出了假设。
Assumption 4 : I also want to go to Typescript eventually, but I assume that changes nothing, since I will just pull in TS to compile it down to .js
and then use whatever solution I used above 假设4 :我最终也想使用Typescript,但是我认为没有任何变化,因为我只是将TS编译为
.js
,然后使用上面使用的任何解决方案
Question : If it's clear what I am trying to do and what confuses me, is a decent solution to look into npm/Webpack
to stich together my .js
files? 问题 :如果很清楚我要做什么,什么让我感到困惑,是否是一个不错的解决方案,可以研究
npm/Webpack
来整理我的.js
文件? What would prepare them for being stiched together, using import/export ? 使用导入/导出 ,如何准备将它们组合在一起? If so, is there an example of how this is usually done?
如果是这样,是否有一个通常如何完成此操作的示例?
As you mentioned, require cannot be used for your purposes, since it is a part of CommonJS and NodeJS's module system. 正如您提到的,require不能用于您的目的,因为它是CommonJS和NodeJS模块系统的一部分。 More info on require can be found here: What is this Javascript "require"?
有关require的更多信息,请参见: Java语言“ require”是什么?
Import is a ES2015 standard JS syntax. 导入是ES2015标准JS语法。 But ES2015 standard and everything above it has very limited browser support.
但是ES2015标准及其之上的所有内容对浏览器的支持都非常有限。 You can read more about it here: Import Reference
您可以在此处了解更多信息: 导入参考
However, you can still code in the latest standard (thereby enabling the use of import/export etc.,) and then transpile the code to be able to run on the browser. 但是,您仍然可以使用最新标准进行编码(从而启用导入/导出等功能),然后转换代码以使其能够在浏览器上运行。 Inorder to do this, you require a transpiler.
为此,您需要一个翻译器。 You can refer Babel which is one of the most popular transpilers : https://babeljs.io/
您可以参考最受欢迎的翻译器之一Babel: https ://babeljs.io/
For your exact purpose, you need to use a module bundler . 为了您的确切目的,您需要使用模块捆绑器 。 Webpack/Rollup etc., are some popular module bundlers.
Webpack / Rollup等是一些流行的模块捆绑器。 They can automatically identify all the JS files referenced through import, combine them and then transpile code to be able to run on the browser (they also use a transpiler) and produce a single JS file (or multiple, based on your configurations).
他们可以自动识别通过导入引用的所有JS文件,对其进行组合,然后进行代码转换,以使其能够在浏览器上运行(它们也使用翻译器),并生成单个JS文件(或多个,取决于您的配置)。
You can refer the getting started guides of Webpack: https://webpack.js.org/guides/getting-started/ 您可以参考Webpack入门指南: https ://webpack.js.org/guides/getting-started/
or RollupJS: https://rollupjs.org/guide/en#quick-start 或RollupJS: https ://rollupjs.org/guide/en#quick-start
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.