Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Assets Manager doc #17512

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,6 @@ object-assign
@license MIT
*/

/*!
Copyright (c) 2018 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/

/*!

diff v4.0.1
Expand Down Expand Up @@ -48,6 +42,12 @@ OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
@license
*/

/*!
Copyright (c) 2018 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/

/** @license React v0.19.1
* scheduler.production.min.js
*
Expand Down
12 changes: 5 additions & 7 deletions src/docs/guides/assets-manager/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Based on [Concurrently](https://github.com/open-cli-tools/concurrently) the Orch

Old assets are not compiled as ES6 modules so they don't need these bundlers. For that matter we kept the old `gulpfile.js` which will be now triggered by `Concurrently` when doing `yarn build -gr`.

Concurrently uses an `Assets.json` file that defines actions to execute. The old Gulp pipline uses a `GulpAssets.json` file that defines actions to execute.
Concurrently uses an `Assets.json` file that defines actions to execute. The old Gulp pipeline uses a `GulpAssets.json` file that defines actions to execute.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I'm know wrong @Piedone submitted a PR for fix such issues, right?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not yet, just opened #17494.


Parcel is the easiest way to build assets so far as it doesn't require any configuration. It is a zero file configuration bundler which means we use the same configuration for all assets. It is the recommended builder for those who want to easily start with a bundler. Though, Vite is more suited for Vue apps.

Expand Down Expand Up @@ -170,7 +170,7 @@ Done. Now run:

Now you could execute the commands that are suggested. It will start the Vite dev server with HMR feature. Though what we want is to execute the server by using the asset manager tool. We will need an Assets.json file for that matter.

Create an Assets.json file at the root of your new module. For example: "src/OrchardCore.Modules/PathToYourModule/Assets.json". This file should contains these settings:
Create an Assets.json file at the root of your new module. For example: "src/OrchardCore.Modules/PathToYourModule/Assets.json". This file should contain these settings:

```json
[
Expand All @@ -187,7 +187,7 @@ This `Assets.json` file will instruct the asset manager tool to execute the Vite

Here is an example of a configuration file that the asset bundler will be able to work with in the context of a Vue app. Notice that we are using `path.resolve()` so that this configuration file always returns the appropriate relative path to the asset bundler. Also, it is required that you set an `outDir` so that the assets be compiled to that directory.

For more details; these configurations are well documented on Rollup.js and Vite.js websites.
For more details, these configurations are well documented on Rollup.js and Vite.js websites.

```javascript
import { defineConfig } from 'vite'
Expand Down Expand Up @@ -232,7 +232,6 @@ Or simply build that Vite app:
yarn build -n my-vue-app
```


### Webpack

Webpack bundler action will support any configuration. From bundling a vue app to compiling a simple library. It is working by configuration file. The asset management tool simply loads a given webpack.config.js file that we instruct to use from the Assets.json file.
Expand Down Expand Up @@ -328,7 +327,6 @@ The destination should always be a folder as we do not support renaming files.

You can use the dry-run task to log to the console where the files will be copied to.


### Sass

Allows to transpile scss files.
Expand Down Expand Up @@ -372,7 +370,7 @@ export function parcel(type, group) {
}
```

Here is an example for vite:
Here is an example for Vite:

```javascript
import vue from "@vitejs/plugin-vue";
Expand Down Expand Up @@ -439,7 +437,7 @@ resolve: {
},
```

Also, now when adding a `<script>` tag to the HTML you will need to use:
Also, now when adding a `<script>` tag to the HTML, you will need to use:

```html
<script type="module" src="somepath"></script>
Expand Down
Loading