The source code has been moved into the main NativeScript monorepo and all issues are handled in the main repo now.
This repository is now in read-only mode (archived) for reference.
NativeScript Webpack
This repository contains the code for the nativescript-dev-webpack plugin which helps in webpacking NativeScript apps.
JavaScript code and general asset bundling have been a member of the web developer toolbox for a long time. Tools like Webpack have been providing support for an enjoyable development experience that lets you assemble client-side code from various module sources and formats and then package it together. Most importantly, they allow for page load time optimizations that reduce or parallelize the number of requests a browser makes to the server.
Why bundle scripts in a mobile app though?
- Fewer filesystem operations on app startup
- Smaller code size
- Tree-shaking
- Preprocessing and interoperability hooks. Webpack provides a way to resolve modules and expressions differently according to its configuration. It also contains a lot of plugins and loaders that let you embed different content in your application or use code written in different programming languages
For more details, see the NativeScript docs for building with webpack.
Ingredients
- webpack config templates.
- helper functions that place files at the correct locations before packaging apps.
- loaders and plugins for vanilla NativeScript and Angular apps.
Usage
$ npm install --save-dev nativescript-dev-webpack
$ tns run android
or
$ tns run ios
Contribute
We love PRs! Check out the contributing guidelines and instructions for local setup. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.
Get Help
Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.
-
SourceMap 为什么 当代码经编译后在浏览器中运行时,若发生错误,定位不到源代码的位置,无法立即找到错误 是什么 是一个用来生成源代码与构建后代码一一映射的方案 怎么用 在webpack.config.js中进行配置 在开发模式下用cheap-module-source-map { // ... mode: 'development', devtool: 'cheap-mo
-
1.背景 1.1 node.js 和 npm **Node.js **是一个 JavaScript 运行环境，不是一个 js 文件，它是基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用；它的实质是对Chrome V8引擎进行了封装，它提供了替代的API使得V8在非浏览器环境下运行的更好。V8引擎执行JavaScript的速度非常快，性能非常好。N
-
场景：项目发布时需要将根目录下的html文件和dist目录中所有文件打包上传，上线后迭代维护还需确保html代码中的资源文件正确。这样的做法非常麻烦，如果打包结果输出的目录或文件名发生变化，那么html代码中对应的script标签需要我们手动修改路径。 一、为什么需要webpack 前端项目的模块化开发 AMD, CommonJS , ES2015 import 等等方案，大多并不直接被浏览器支持
-
当执行了npm run dev命令来编译前端资源时，经常会遇到一个报错，类似这样： > Code@1.0.0 dev /home/vagrant/Code > cross-env NODE_ENV=development webpack --progress --hide-modules sh: 1: cross-env: not found npm ERR! Linux 4.4.0-51-g
-
优化代码运行性能 Code Split 为什么 打包代码时会将所有 js 文件打包到一个文件中，体积太大了。我们如果只要渲染首页，就应该只加载首页的 js 文件，其他文件不应该加载。 所以我们需要将打包生成的文件进行代码分割，生成多个 js 文件，渲染哪个页面就只加载某个 js 文件，这样加载的资源就少，速度就更快。 是什么 代码分割（Code Split）主要做了两件事： 分割文件：将打包生成的
-
在 10- webpack 自动生成 index.html 之后，index.html 的自动生成任务 由 html-webpack-plugin 接管。 有时候会面临需要将一段 html标签内容、初始化页面的JavaScript、初始化样式CSS 需要内联的需要，可以直接写到 index.html 中去，但是为了方便维护最好还是把文件独立出来，然后由 webpack 自动完成内联任务。 webp
-
前言 上一篇文章详细讲解了Webpack的基础配置，这篇文章将在上一篇的基础上讲解Webpack的高级配置，带大家学习Webpack的优化，让我们的代码在编译/运行时性能更好~ 1、提升开发体验 开发时我们运行的代码是经过 webpack 编译后的，所有 css 和 js 合并成了一个文件，并且多了其他代码。此时如果代码运行出错那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多，
-
最近为了能够写一份值得参考的webpack文档，特意的去查了好多相应的书籍，博客。距离上次写的那篇文章好想也过去将近一周的时间了。我想是时候要准备下一篇文章了。不然就食言而肥了。 算了，技术类文章就直接从技术类开始说起吧。首先，学习webpack呢？是因为我在开发vue和react的时候遇到了这个工具，然后最近在看人家的招聘要求的时候，总是会带上这个。 然后我就趁着下班时间研究了一下这个东西。
-
NativeScript TypeScript nativescript-dev-typescript is deprecated in favour of bundle workflow, which will be introduced with CLI v6.0. More info about the upcoming new approach can be found here. A p
-
SASS CSS pre-processor for NativeScript projects nativescript-dev-sass is deprecated in favour of bundle workflow, which will be introduced with CLI v6.0. More info about the upcoming new approach can
-
nativescript-dev-appium A package to help with writing and executing e2e Appium tests. Features Requirеments Setup Structure Files Preview Usage Blogs Demos Videos Custom Appium Capabilities Options T
-
webpack-dev-server Use webpack with a development server that provideslive reloading. This should be used for development only. It uses webpack-dev-middleware under the hood, which providesfast in-mem
-
概述 本文主要介绍 canal 产品整体设计，帮助你快速地熟悉代码脉络。如果你对 canal 还一无所知，只是知道他能进行数据迁移同步，那么建议先行阅读 [[Introduction]] 和 [[AdminGuide]] 两篇文档了解。 产品设计 server 代表一个 canal 运行实例，对应于一个 jvm instance 对应于一个数据队列 （1个 canal server 对应 1..n
-
dev-setup 搭建本地开发环境相关文档。