Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commita6e8143

Browse files
committed
Merge branch '4.4' into 5.3
* 4.4:resolves#15575 add npm equivalent of yarn commands in a separate code block.
2 parentsa749db1 +5eda32c commita6e8143

File tree

9 files changed

+75
-12
lines changed

9 files changed

+75
-12
lines changed

‎frontend/encore/advanced-config.rst‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,8 +105,12 @@ prefer to build configs separately, pass the ``--config-name`` option:
105105

106106
..code-block::terminal
107107
108+
# if you use the Yarn package manager
108109
$ yarn encore dev --config-name firstConfig
109110
111+
# if you use the npm package manager
112+
$ npm run dev -- --config-name firstConfig
113+
110114
Next, define the output directories of each build:
111115

112116
..code-block::yaml

‎frontend/encore/bootstrap.rst‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,12 @@ First, to be able to customize things further, we'll install ``bootstrap``:
77

88
..code-block::terminal
99
10+
# if you use the Yarn package manager
1011
$ yarn add bootstrap --dev
1112
13+
# if you use the npm package manager
14+
$ npm install bootstrap --save-dev
15+
1216
Importing Bootstrap Styles
1317
--------------------------
1418

@@ -42,9 +46,14 @@ used in your application:
4246

4347
..code-block::terminal
4448
45-
// jQuery is only required in versions prior to Bootstrap 5
49+
# if you use the Yarn package manager
50+
# (jQuery is only required in versions prior to Bootstrap 5)
4651
$ yarn add jquery @popperjs/core --dev
4752
53+
# if you use the npm package manager
54+
# (jQuery is only required in versions prior to Bootstrap 5)
55+
$ npm install jquery @popperjs/core --save-dev
56+
4857
Now, require bootstrap from any of your JavaScript files:
4958

5059
..code-block::javascript

‎frontend/encore/dev-server.rst‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,12 @@ While developing, instead of using ``yarn encore dev --watch``, you can use the
66

77
..code-block::terminal
88
9+
# if you use the Yarn package manager
910
$ yarn encore dev-server
1011
12+
# if you use the npm package manager
13+
$ npm run dev-server
14+
1115
This builds and serves the front-end assets from a new server. This server runs at
1216
``localhost:8080`` by default, meaning your build assets are available at ``localhost:8080/build``.
1317
This server does not actually write the files to disk; instead it serves them from memory,
@@ -32,8 +36,12 @@ You can set these options via command line options:
3236

3337
..code-block::terminal
3438
39+
# if you use the Yarn package manager
3540
$ yarn encore dev-server --port 9000
3641
42+
# if you use the npm package manager
43+
$ npm run dev-server -- --port 9000
44+
3745
You can also set these options using the ``Encore.configureDevServerOptions()``
3846
method in your ``webpack.config.js`` file:
3947

‎frontend/encore/faq.rst‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ and the built files. Your ``.gitignore`` file should include:
5353
# whatever path you're passing to Encore.setOutputPath()
5454
/public/build
5555
56-
You *should* commit all of your source asset files, ``package.json`` and ``yarn.lock``.
56+
You *should* commit all of your source asset files, ``package.json`` and ``yarn.lock`` or ``package-lock.json``.
5757

5858
My App Lives under a Subdirectory
5959
---------------------------------
@@ -105,8 +105,9 @@ file script tag is rendered automatically.
105105
This dependency was not found: some-module in ./path/to/file.js
106106
---------------------------------------------------------------
107107

108-
Usually, after you install a package via yarn, you can require / import it to use
109-
it. For example, after running ``yarn add respond.js``, you try to require that module:
108+
Usually, after you install a package via yarn or npm, you can require / import
109+
it to use it. For example, after running ``yarn add respond.js`` or ``npm install respond.js``,
110+
you try to require that module:
110111

111112
..code-block::javascript
112113

‎frontend/encore/installation.rst‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,13 @@ project:
1414
..code-block::terminal
1515
1616
$ composer require symfony/webpack-encore-bundle
17+
18+
# if you use the Yarn package manager
1719
$ yarn install
1820
21+
# if you use the npm package manager
22+
$ npm install
23+
1924
If you are using:ref:`Symfony Flex<symfony-flex>`, this will install and enable
2025
the `WebpackEncoreBundle`_, create the ``assets/`` directory, add a
2126
``webpack.config.js`` file, and add ``node_modules/`` to ``.gitignore``. You can
@@ -32,9 +37,10 @@ Install Encore into your project via Yarn:
3237

3338
..code-block::terminal
3439
40+
# if you use the Yarn package manager
3541
$ yarn add @symfony/webpack-encore --dev
3642
37-
# if youprefernpm, run this command instead:
43+
# if youuse thenpm package manager
3844
$ npm install @symfony/webpack-encore --save-dev
3945
4046
This command creates (or modifies) a ``package.json`` file and downloads
@@ -145,7 +151,7 @@ Next, open the new ``assets/app.js`` file which contains some JavaScript code
145151
// any CSS you import will output into a single css file (app.css in this case)
146152
import'./styles/app.css';
147153
148-
// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
154+
// Need jQuery? Install it with "yarn add jquery"(or "npm install jquery"), then uncomment to import it.
149155
// import $ from 'jquery';
150156
151157
console.log('Hello Webpack Encore! Edit me in assets/app.js');

‎frontend/encore/postcss.rst‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,12 @@ Next, download any plugins you want, like ``autoprefixer``:
2323

2424
..code-block::terminal
2525
26+
# if you use the Yarn package manager
2627
$ yarn add autoprefixer --dev
2728
29+
# if you use the npm package manager
30+
$ npm install autoprefixer --save-dev
31+
2832
Next, create a ``postcss.config.js`` file at the root of your project:
2933

3034
..code-block::javascript

‎frontend/encore/reactjs.rst‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,12 @@ Using React? First add some dependencies with Yarn:
1010

1111
..code-block::terminal
1212
13+
# if you use the Yarn package manager
1314
$ yarn add react react-dom prop-types
1415
16+
# if you use the npm package manager
17+
$ npm install react react-dom prop-types --save
18+
1519
Enable react in your ``webpack.config.js``:
1620

1721
..code-block::diff

‎frontend/encore/simple-example.rst‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,23 +55,33 @@ together and - thanks to the first ``app`` argument - output final ``app.js`` an
5555

5656
.. _encore-build-assets:
5757

58-
To build the assets, run:
58+
To build the assets, run the following if you use the Yarn package manager:
5959

6060
..code-block::terminal
6161
6262
# compile assets once
6363
$ yarn encore dev
64-
# if you prefer npm, run:
65-
$ npm run dev
6664
6765
# or, recompile assets automatically when files change
6866
$ yarn encore dev --watch
69-
# if you prefer npm, run:
70-
$ npm run watch
7167
7268
# on deploy, create a production build
7369
$ yarn encore production
74-
# if you prefer npm, run:
70+
71+
# if you use the npm package manager
72+
$ npm install react react-dom prop-types --save
73+
74+
If you use the npm package manager, run the following commands instead:
75+
76+
..code-block::terminal
77+
78+
# compile assets once
79+
$ npm run dev
80+
81+
# or, recompile assets automatically when files change
82+
$ npm run watch
83+
84+
# on deploy, create a production build
7585
$ npm run build
7686
7787
..note::
@@ -161,8 +171,12 @@ We'll use jQuery to print this message on the page. Install it via:
161171

162172
..code-block::terminal
163173
174+
# if you use the Yarn package manager
164175
$ yarn add jquery --dev
165176
177+
# if you use the npm package manager
178+
$ npm install jquery --save-dev
179+
166180
Great! Use ``import`` to import ``jquery`` and ``greet.js``:
167181

168182
..code-block::diff
@@ -222,8 +236,12 @@ and restart Encore:
222236

223237
..code-block::terminal
224238
239+
# if you use the Yarn package manager
225240
$ yarn run encore dev --watch
226241
242+
# if you use the npm package manager
243+
$ npm run watch
244+
227245
Webpack will now output a new ``checkout.js`` file and a new ``account.js`` file
228246
in your build directory. And, if any of those files require/import CSS, Webpack
229247
will *also* output ``checkout.css`` and ``account.css`` files.
@@ -291,9 +309,14 @@ you need a feature, Encore will tell you what you need to install. Run:
291309

292310
..code-block::terminal
293311
312+
# if you use the Yarn package manager
294313
$ yarn add sass-loader@^10.0.0 sass --dev
295314
$ yarn encore dev --watch
296315
316+
# if you use the npm package manager
317+
$ npm install sass-loader@^10.0.0 sass --save-dev
318+
$ npm run watch
319+
297320
Your app now supports Sass. Encore also supports LESS and Stylus. See
298321
:doc:`/frontend/encore/css-preprocessors`.
299322

‎frontend/encore/vuejs.rst‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,12 @@ your Vue.js app update *without* a browser refresh! To activate it, use the
6969

7070
..code-block::terminal
7171
72+
# if you use the Yarn package manager
7273
$ yarn encore dev-server
7374
75+
# if you use the npm package manager
76+
$ npm run dev-server
77+
7478
That's it! Change one of your ``.vue`` files and watch your browser update. But
7579
note: this does *not* currently work for *style* changes in a ``.vue`` file. Seeing
7680
updated styles still requires a page refresh.

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp