来自npm package.json的JS动态导入映射 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Node.js宣布新的--experimental-modules【译】

各种项目npm包都使用了ES模块编写，并且可以通过在浏览器中直接使用。支持导入映射（import maps）即将登陆Chrome。...import map将让浏览器支持node.js风格的包名导入。这些采用ES模块方面的进展大大加快了Node.js对ES模块的支持速度。...动态import()表达式可以用来从CommonJS或者ES模块导入ES模块文件。...在解决这个问题之前，请不要发布任何打算给Node.js使用的ES模块的npm包。工作进展上面所有的这些都是作为Node.js 12 --experimental-modules的一部分。...我们希望提供一种更简单的方式在ES模块代码中进行require 包路径映射（原文：Package path maps）.我们想要提供一种包内路径到文件的映射。

1.8K2 0

从零开始学VUE之Webpack(参数配置化)

webpack的配置 webpack.config.js 上面执行的webpack命令很长,那么有没有什么简化的方式呢,有,那就是配置文件,默认名称为webpack.config.js 拷贝webpack.../src/js/main.js', // 配置目标位置 output: { // path 只能写绝对路径不能写相对路径但是不要直接写死,需要动态获取文件位置...'bundle.js' } } 应为需要动态获取webpack.config.js的位置所以需要引入依赖包,但是这个项目暂时不是使用node管理的所以我们需要使用node初始化管理 npm init...运行结果和webpack起步一致在开发的时候我们一般期望不要运行过长的命令并且希望命令同一管理,这时我们可以在package.json的scripts对象中进行命令映射,然后我们就可以通过node的npm...可以看到,同样可以打包但是这样映射打包和直接执行webpack还是有一定区别的直接执行webpack会默认使用全局的webpack,而通过npm run bulid执行会默认先找据局部的webpack

5425 0

您找到你想要的搜索结果了吗？

是的

没有找到

从零开始学VUE之VueRouter(Vue-router的安装与集成)

安装Vue-router 因为我们采用的是Webpack工程,所以直接采用Npm安装 npm install vue-router --save 工程集成Vue-router 安装完成后在Package.json...1:导入路由对象并通过Vue.use加载 2:创建路由实例,并传入路由映射配置在src下创建router文件夹,并在里面创建index.js ?...' // Vue加载 Vue.use(Router) // 传入路由映射配置导出路由实例 export default new Router({ routes: [ { path...: '/', name: 'HelloWorld', component: HelloWorld } ] }) 3:在Vue实例中挂载创建的路由实例 main.js.../App' // 导入创建的路由实例 import router from '.

5053 0

前端构建系统-《node.js实战》

在package.json文件中，scripts 属性可以指定npm 的命令： { ......"scripts":{ "start":"node server.js" } ... } 在package.json文件中配置了之后就能使用npm run start 或者npm start.../创建目录 cd gulp-example/ // 进入目录 npm init -y // 初始化package.json npm i --save-dev gulp //安装开发过程的gulp依赖...注意：源码映射需要两步：一个是声明想要源码映射，另一个是写源码映射文件。在终端输入gulp就可以运行这个这个Gulp任务了。一个好用的热重载工具：gulp-watch。。。监控文件系统的变化。...模块给了我们，无需任何额外的配置，就可以使用来自npm的模块。。

1.9K2 0

快速搭建node.js新项目?看这篇就够了！

npm 规定，在项目根目录中，必须提供一个叫做 package.json 的包管理配置文件。用来记录与项目有关的一些配置信息。...//对于项目起始的空文件夹 npm init -y //运行 npm install 命令安装包的时候, npm会自动把包的名称和版本号，记录到 package.json 中注意：上述命令只能在英文的目录下成功运行...配置 cors 跨域 2.1 安装 cors 中间件： npm i cors@2.8.5 2.2 在 app.js 中导入并配置 cors 中间件： // 导入 cors 中间件 const cors...安装生成 Token 字符串的包： npm i jsonwebtoken@8.5.1 7.3 在 /router_handler/user.js 模块的头部区域，导入 jsonwebtoken 包：...运行如下的命令，安装解析 Token 的中间件： npm i express-jwt@5.3.3 8.2 在 app.js 中注册路由之前，配置解析 Token 的中间件： // 导入配置文件 const

12.2K8 3

Webpack最佳实践

如果想要优先于某个目标目录搜索，则需把该目录放到目标目录前面，可详看官网例子 alias：设置别名，方便使用，下面的例子应用于 src 目录下的路径使用 mainFields：当从 npm 包中导入模块时...（例如，import * as D3 from 'd3'），此选项将决定在 package.json 中使用哪个字段导入模块。...可以阻止生成用于导入的模块，或要求调用与正则表达式或筛选函数匹配的模块。...如果想要优先于某个目标目录搜索，则需把该目录放到目标目录前面，可详看官网例子 alias：设置别名，方便使用，下面的例子应用于 src 目录下的路径使用 mainFields：当从 npm 包中导入模块时...（例如，import * as D3 from 'd3'），此选项将决定在 package.json 中使用哪个字段导入模块。

3.2K2 0

Webpack 详解

例如，假设我们的 src / index.js 文件从另一个文件导入了一个函数并使用了它： import sum from '....-- index.js - package.json - .babelrc 您的npm start和npm run build脚本现在应该可以工作了。...但是它们也共享来自 build-utils / webpack.common.js 的通用Webpack配置。...一切都动态合并在 build-utils / webpack.config.js 文件中，该文件根据 package.json中 npm脚本中的传入标志进行动态合并。...插件文件的命名与 package.json中 npm脚本传递的标志匹配。您的Webpack合并确保将所有传递的插件标记添加为Webpack配置中的实际插件。

6.2K2 0

深入了解Webpack

例如，假设我们的 src / index.js 文件从另一个文件导入了一个函数并使用了它： import sum from '....-- index.js - package.json - .babelrc 您的npm start和npm run build脚本现在应该可以工作了。...但是它们也共享来自 build-utils / webpack.common.js 的通用Webpack配置。...一切都动态合并在 build-utils / webpack.config.js 文件中，该文件根据 package.json中 npm脚本中的传入标志进行动态合并。...插件文件的命名与 package.json中 npm脚本传递的标志匹配。您的Webpack合并确保将所有传递的插件标记添加为Webpack配置中的实际插件。

6.9K7 5

深入了解Webpack 5

例如，假设我们的 src / index.js 文件从另一个文件导入了一个函数并使用了它： import sum from '....-- index.js - package.json - .babelrc 您的npm start和npm run build脚本现在应该可以工作了。...但是它们也共享来自 build-utils / webpack.common.js 的通用Webpack配置。...一切都动态合并在 build-utils / webpack.config.js 文件中，该文件根据 package.json中 npm脚本中的传入标志进行动态合并。...插件文件的命名与 package.json中 npm脚本传递的标志匹配。您的Webpack合并确保将所有传递的插件标记添加为Webpack配置中的实际插件。

3.6K3 0

Webpack模块联邦：微前端架构的新选择

基础概念容器应用（Container）：作为微前端架构的宿主，负责加载和协调各个微应用。远程应用（Remote）：独立的微应用，可以暴露自己的模块给其他应用使用，也可以消费来自其他应用的模块。...在这个例子中，MyComponent组件可以从容器应用或其他微应用中被导入和使用。3. 消费远程模块在容器应用或另一个远程应用中，可以直接导入远程暴露的模块。...注意，由于create-react-app内部已包含Webpack，通常不需要单独安装，这里仅为演示目的）：npm install webpack webpack-cli --save-dev修改package.json...启动应用分别启动两个应用：# 在远程应用目录npm start --port 3010# 在容器应用目录npm start现在，在浏览器中访问容器应用，你应该能看到来自远程应用的组件被成功加载和显示。...动态加载和懒加载在实际项目中，你可能希望根据用户的行为或特定条件动态加载远程应用。Webpack模块联邦支持异步加载，只需在导入时使用import()函数即可。

6000 0

Vite 4.4实验性地支持Lightning CSS,Lightning CSS更快的CSS处理利器

npm install --save-dev lightningcss 安装完成后，导入模块并调用Lightning CSS的API之一。...以下示例将输入的CSS进行压缩，并输出编译后的代码和源映射。...当你只需要编译CSS，而不需要来自更大的构建工具（如代码分割和对其他语言的支持）的更高级功能时，可以使用CLI。...要使用CLI，应该用npm兼容的包管理器安装lightningcss-cli包： npm install --save-dev lightningcss-cli 然后，你可以通过npx、yarn或在package.json...如果输入的CSS来自其他编译器（如Sass或Less），你还可以使用inputSourceMap API选项将输入源映射传递给Lightning CSS。这将把编译后的位置映射回原始源代码中的位置。

4692 0

webpack教程：如何从头开始设置 webpack 5

package.json 安装webpack和webpack-cli： npm i -D webpack webpack-cli 接着，创建目录 src，并在其里面创建 index.js，内容如下：...在package.json中，我们可以创建一个运行webpack命令的构建脚本。...将 JS 编译为浏览器可以理解的版本导入样式并将 SCSS 编译为 CSS 导入图像和字体（可选）设置React或Vue Babel (JavaScript) Babel是一个工具，可让使用最新的...Images 假设我们需要引用一张图片并直接导入到 JS 文件中，这样是无法正常工作的。为了演示，创建 src/ images 并向其中添加图像，然后尝试将其导入到index.js文件中。...package.json "scripts": { "start": "webpack serve" } npm start 运行此命令时，将在浏览器中自动弹出一个指向localhost：8080的链接

2.2K1 0

NPM 包开发与优化全面指南

理解 NPM 包的结构 1.1 package.json 文件：包的核心 package.json文件是 NPM 包的中央配置，定义了包的各个方面，从基本元数据到复杂的发布配置。...(浏览器特定构建) ├── package.json └── tsconfig.json 对应的package.json配置： { "name": "my-awesome-package...深入理解模块格式 2.1 CommonJS (CJS) CommonJS 是 Node.js 的传统模块格式。它使用require()进行导入，使用module.exports进行导出。.../src/polyfills.js", "*.css"] } 3.2 代码分割和动态导入对于大型包，考虑使用代码分割，允许用户只导入他们需要的部分： // heavyFunction.js export.../heavyFunction.js'); heavyFunction(); } 3.3 条件导出使用条件导出为不同的环境或导入条件提供不同的入口点： { "name": "my-package

1541 0

深入理解 TypeScript 模块

/my-module.js"; 要注意的是如果./my-module.js是一个全局模块，很容易产生变量冲突，所以说这种导入是具有副作用的。 8....通常，在 Node.js 里导入是通过 require 函数调用进行的。Node.js 会根据 require 的是相对路径还是非相对路径做出不同的行为。...我们可以通过 tsconfig.json 来自定义模块的解析策略。...11.自定义模块解析策略 ---- tsconfig.json 中的 compilerOptions 是我们用的最多，也是最复杂的配置。其中有两种方式来自定义模块解析策略。...虚拟目录目录需要在编译时将代码按照约定拷贝到指定目录；路径映射则需要使用 babel 在编译阶段进行转换，babel 有提供现成的插件来完成路径映射的转换，如下：安装插件 npm install babel-plugin-root-import

2.5K3 0

webpack打包typescript

当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle 打包起因在编写ts文件的过程当中...// 使用export 在当前文件中创建一个本地作用域, 防止变量冲突 export { } 但是当我使用命令tsc tsc05.ts -w运行生成一个js文件时，使用标签导入进html...如果TypeScript是全局安装的，请尝试使用“link链接TypeScript”或“npm链接TypeScript” 当前的package.json中的配置： { "devDependencies...安装好这些包之后，就需要配置webpack.config.js文件了在与package.json同级目录下创建webpack.config.js文件，这是webpack的配置文件，非常重要 const...打包出的tsc05.js文件导入html中发现已经可以成功运行了这里的配置过程其实较为简单，但是如果将webpack打包的热更新添加上去就可能会配置出错

2.2K0 0

【微服务】136：非常好用的前端框架Vue

1静态页面最初的网页以HTML为主，是纯静态的网页。页面信息来自服务端的单向流通，开发人员也只关心页面的样式和内容即可。...此时的开发人员不仅仅要编写HTML样式，还要懂ajax与后端交互，再通过JS操作Dom元素来实现页面动态效果。...①项目初始化命令：npm init -y。 init即为初始化的意思，-y表示yes确定的意思，初始化完成之后，会在项目目录下出现一个package.json文件。...此时再查看package.json，会发现变化： ? 这个package.json文件就和Java中的pom文件很类似，vue就有点类似于Java的jar包。...就连引入依赖的关键字都是一样的，这些配置完成，就可以使用vue进行开发了。三、Vue入门案例创建html文件，写一个入门案例： ? 首先导入项目目录中的vue，这不用多说。

1.1K3 0

NPM 包开发与优化全面指南

理解 NPM 包的结构1.1 package.json 文件：包的核心package.json文件是 NPM 包的中央配置，定义了包的各个方面，从基本元数据到复杂的发布配置。...浏览器特定构建)├── package.json└── tsconfig.json对应的package.json配置：{ "name": "my-awesome-package", "version...深入理解模块格式2.1 CommonJS (CJS)CommonJS 是 Node.js 的传统模块格式。它使用require()进行导入，使用module.exports进行导出。.../src/polyfills.js", "*.css"]}3.2 代码分割和动态导入对于大型包，考虑使用代码分割，允许用户只导入他们需要的部分：// heavyFunction.jsexport function.../heavyFunction.js'); heavyFunction();}3.3 条件导出使用条件导出为不同的环境或导入条件提供不同的入口点：{ "name": "my-package",

1421 0

关于前端大管家package.json，你知道多少

当执行该命令时，就会根据 package.json 文件中的配置信息来自动下载所需的模块，也就是配置项目所需的运行和开发环境。...("")，用来导入模块，所以应当尽可能的简短、语义化；名称不能和其他模块的名称重复，可以使用 npm view 命令查询模块名是否重复，如果不重复就会提示 404：如果 npm 包上有对应的包，则会显示包的详细信息...字段会映射到npm_package_config_port环境变量中： console.log(process.env.npm_package_config_port) // 3000 用户可以通过...如果我们将项目发布为 npm 包，那么当使用 require 导入 npm 包时，返回的就是 main 字段所列出的文件的 module.exports 属性。...上面的配置在 package.json 包中提供了一个映射到本地文件名的 bin 字段，之后 npm 包将链接这个文件到 prefix/fix 里面，以便全局引入。

1.5K2 0

Webpack最佳实践

webpack 安装新建一个目录，进入目录初始化 package.json，并安装 webpack 依赖// 初始化包npm init -y// 安装依赖npm i webpack webpack-cli...如果想要优先于某个目标目录搜索，则需把该目录放到目标目录前面，可详看官网例子alias：设置别名，方便使用，下面的例子应用于 src 目录下的路径使用mainFields：当从 npm 包中导入模块时（...例如，import * as D3 from 'd3'），此选项将决定在 package.json 中使用哪个字段导入模块。...splitChunks.cacheGroups 缓存组可以继承和/或覆盖来自 splitChunks.* 的任何选项。...es6 的 import() 语法实现懒加载，通过 jsonp 实现动态加载文件，import 函数返回的是 promise 对象。

1.1K1 0

前端项目路径别名终极解决方案

因此，使用相对路径导入可能会变得更长且更混乱，这可能会对代码的外观产生负面影响，并让辨识代码的来源变得更加困难，更加重要的是代码文件位置变动相对路径就得改变。...使用路径别名即绝对路径导入，不仅解决了理解导入路径的问题，而且还简化了重构期间代码移动的过程，美丽且直观。...原生路径别名从 Node.js v12.19.0 开始，开发人员可以使用 Subpath Imports[1] 在 npm 包中声明路径别名。...这可以通过 package.json 文件中的 imports 字段来完成。不需要在 npm 上发布包。在任何目录中创建一个 package.json 文件就足够了。因此，这种方法也适用于私人项目。...这样设置的原生支持路径别名理论上有以下优点：无需安装任何第三方库。无需预先构建或动态处理导入即可运行代码。任何使用 ESM 标准导入且基于 Node.js 的工具都支持别名。

2991 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭